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

Question

我使用一个输入字段，它在其中的值发生变化时调用一个方法。但是，当我通过 ngModel（不是手动输入）在输入字段中设置值时，不会触发输入字段的 "value changed" 事件。

输入字段：

<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 值变化的回答 你可以阅读 here

已更新

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

public updateOrderNumberFilter(value: any): void {

}

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

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

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

Answer 2

因此您可以从更新模型的地方手动调用 updateData 方法 (orderNumberFilterValue)

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

Angular input event is not fired by setting the value with the model

events

input

typescript

ngmodel

angular