（变化）vs（ngModelChange）的角度

斯丁2020-03-24

Angular 1不接受onchange()事件，它仅接受ng-change()事件。

另一方面，Angular 2接受(change)和(ngModelChange)事件，两者似乎都在做相同的事情。

有什么不同？

哪个最适合表现？

ngModelChange：

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs 变化：

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

西里Near2020/03/24 15:12:28

在Angular 7中，(ngModelChange)="eventHandler()"意志将在绑定到[(ngModel)]="value"值更改之前触发，而意志将在绑定到更改值之后(change)="eventHandler()"触发。[(ngModel)]="value"

小小2020/03/24 15:12:28

1- (change)绑定到HTML onchange事件。有关HTML onchange的文档说明如下：

用户更改<select>元素的选定选项时执行JavaScript

2-如前所述，(ngModelChange)绑定到模型变量绑定到您的输入。

所以，我的解释是：

小卤蛋2020/03/24 15:12:28

正如我在另一个主题中找到并写的那样-这适用于angular <7（不确定在7+中的效果如何）

为了未来

我们需要注意，这[(ngModel)]="hero.name"只是捷径，可以简化为：[ngModel]="hero.name" (ngModelChange)="hero.name = $event"。

因此，如果我们将代码去糖化，最终结果将是：

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

要么

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

如果检查上面的代码，您会注意到我们以2个ngModelChange事件结束，这些事件需要按一定顺序执行。

总结：如果放置ngModelChange在之前ngModel，则将$event作为新值，但是模型对象仍保留先前的值。 如果将其放置在之后ngModel，则该模型将已经具有新值。

Newest Answer