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函数来监听控件值的变化。

关于反应式表单值更改的另一个答案，您可以阅读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方法

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

2 个答案: