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

【问题标题】：ngModel and change method on input does not workngModel 和输入的更改方法不起作用
【发布时间】：2020-03-29 09:59:27
【问题描述】：

我有以下 HTML 模板

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

这是我的 .ts

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

ngModel 和 change 在同一个元素中是错误的吗？在我的情况下，mobileChanged 在我输入输入时没有被调用。但是，当我检查 mobile 的值时，它会正确更新。

这是 Angular 7。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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">

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

【讨论】：