时间戳

首页 > 解决方案 > 通过使用模型设置值不会触发角度输入事件

angular - 通过使用模型设置值不会触发角度输入事件

问题描述

我使用一个输入字段，它在其中的值发生变化时调用一个方法。但是当我通过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

}

标签： angulartypescripteventsinputngmodel

解决方案

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

您可以使用Reactive Forms而不是Template Driven Forms使用它的valueChanges功能来监听控件值的变化。

您可以在此处阅读有关Reactive Form 值更改的另一个答案

更新

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

public updateOrderNumberFilter(value: any): void {

}

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

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

并在 中调用它finally并通过value.

推荐阅读