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 global derectory安装到typings（您可以导入它）：

typings install dt~jquery --global --save

然后，您可以在＆＃34; home.ts＆＃34;

中导入JQuery

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 SOlution

Answer 3

你的方式有两个黑点，我们无法控制。它们是：
1. (change)='onChangeTime($event.target.value)'。我不确定Ionic如何绑定change函数。也许与change的{{1}}函数不一样。所以我们无法控制它 2. input我们无法控制Jquery如何触发它。

所以，只要采用我们知道并且我们可以控制的方式。它是纯粹的javascript。

$(...).trigger('onchange')

您应该通过javascript添加<ion-input type="text" class="scoreboardus" [(ngModel)]='text'> </ion-input>侦听器：

onChange

Answer 4

你非常接近你正在寻找的东西。

您的代码有一个小问题

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

而不是onchange，您应该使用change来触发操作。不应将on添加为前缀。事件名称应该与我们在jQuery中的on()函数或JavaScript中的addEventListener中使用的名称相同。

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

onchange无效

$(document).ready(function(){
  $('#ip').on('change',function(){
    alert(this.value);
  });
  $('#btn').click(function(){
    $('#ip').val('test').trigger('onchange');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ip" />
<button id="btn">Change</button>

您必须使用change代替

$(document).ready(function(){
  $('#ip').on('change',function(){
    alert(this.value);
  });
  $('#btn').click(function(){
    $('#ip').val('test').trigger('change');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ip" />
<button id="btn">Change</button>

您的代码仅在手动编辑时才起作用，因为脚本所做的更改不会触发事件侦听器。你必须手动触发它。

另请注意，您必须在Angular中使用箭头函数()=>{}并在ngAfterViewInit中添加jQuery代码，然后只有角度支持动态元素

Answer 5

试试这个：

 <ion-item>
    <ion-input [(ngModel)]="nickname" (keypress)="onChange($event)" ></ion-input>
  </ion-item>

Answer 6

使用keyup事件会自动触发事件处理程序并为我工作

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

6 个答案: