ionic:当从外部脚本更改输入值时,不会在<ion-input>上触发更改事件

Question

我想在输入改变时调用该函数.

我在home.html文件中创建了以下内容

<ion-input type="text" class="scoreboardus" [(ngModel)]='text' 
      (input)='onInputTime($event.target.value)' (change)='onChangeTime($event.target.value)'>
   </ion-input>

并在home.ts文件中

onChangeTime() {
  alert('onChangeTime called');
}

onInputTime() {
  alert('onInputTime called');
}

如果在输入字段中手动给出值,上面的代码工作正常.

我的问题:

我正在从外部javascript文件之一更改输入值.

$('.scoreboardus input').val(200).trigger('onchange');

上面的代码改变了输入字段值......但是没有调用函数

结果代码应该在创建应用程序后工作.

Answer 1

您必须使用(ionChange)而不是(更改).

<ion-input type="text" class="scoreboardus" [(ngModel)]='text' (input)='onInputTime($event.target.value)' (ionChange)='onChangeTime($event.target.value)'>

Answer 2

您是否ionic-2按如下方式安装了 Jquery

安装 Jquery

 npm install jquery --save

之后，将 JQuery 全局目录安装到typings（您可以导入它）：

typings install dt~jquery --global --save

然后，您可以导入JQuery您的“home.ts”

import * as $ from 'jquery'

现在尝试您的Jquery功能如下：

$('.scoreboardus input').val(200).trigger('change');

更新： 您可以将模板引用变量分配给 ，例如#ionInput1，在组件类中获取其本机元素（通过@ViewChild），然后使用 jQuery 本身来监听更改事件。

   import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

    @Component({
      selector: 'my-app',
      template: `
      <h1>Firing Jquery</h1>
      <hr>
     <ion-input type="text" class="scoreboardus" [(ngModel)]='text' 
      (input)='onInputTime($event.target.value)' (change)='onChangeTime($event.target.value)' #ionInput1>
   </ion-input>
      })
    export class AppComponent implements AfterViewInit  {

      @ViewChild('ionInput1') ionInput1:ElementRef;

      ngAfterViewInit() {
        $(this.ionInput1.nativeElement).on('change', (e) => {
          console.log('Change made -- ngAfterViewInit');
          this.onChangeTime(e);
        });
      }

      onChangeTime(): void{
        console.log('Change made -- onChangeTime');
      }

    }

有关更多信息，请参阅此SO 解决方案