输入的 ngModel 和更改方法不起作用

Question

我有以下 HTML 模板

<input type="text" [(ngModel)]="mobile" (change)="mobileChanged()">

这是我的.ts

mobileChanged = () => {
    console.log(this.mobile);
};

将ngModel和change放在同一个元素中是错误的吗？在我的例子中，当我输入时 mobileChanged 没有被调用。然而，当我检查 mobile 的值时，它已正确更新。

这是Angular7.

Answer 1

使用 change 将在您失去输入字段的焦点时触发 mobileChanged()（例如：在字段外单击）。如果您想在输入时触发 mobileChanged()，请改用 (ngModelChange)="mobileChanged($event)"。

Answer 2

我建议阅读本教程： https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html 为了更好地理解双向数据绑定和掌握ngModel的使用。

正如使用 ngModel 解释的那样，将表达式绑定到元素的 input 事件，因此它类似于：

<input [value]="mobile" (input)="mobile = $event.target.value">

您可以在调用的同一方法中管理值和日志的更新。

ngModel and change method on input does not work