通过使用模型设置值不会触发 Angular 输入事件

Question

我使用一个输入字段，它在其中的值发生变化时调用一个方法。但是当我通过 ngModel(不是手动输入)在输入字段中设置值时，输入字段的“值已更改”事件将不会被触发。

输入框:

<div>
  <input type="text" id="orderNumberFilter" (input)="updateOrderNumberFilter($event)" [(ngModel)]="orderNumberFilterValue">
</div>

组件:

public updateData(evt: any): void {
  .finally(() => {
    this.orderNumberFilterValue = "test"
  })
  .subscribe(
    //get data from backend
  });
}


public updateOrderNumberFilter(evt: any): void {

 //do stuff with the event

}

Answer 1

而且它不会被触发，因为 input 事件只会在用户交互期间被触发。

您可以使用 Reactive Forms 而不是 Template Driven Forms 并使用其 valueChanges 函数您可以监听值的变化控制。

关于 Reactive Form value changes 的另一个答案你可以阅读 here

已更新

您可以声明您的函数以获取输入的值

public updateOrderNumberFilter(value: any): void {

}

在标记中附加 $event.target.value

<input type="text" id="orderNumberFilter" (input)="updateOrderNumberFilter($event.target.value)" [(ngModel)]="orderNumberFilterValue">

并在 finally 中调用它并传递 value。