(变化)vs(ngModelChange)的角度

JavaScript HTML

斯丁

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"/>

第3424篇《(变化)vs(ngModelChange)的角度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
西里Near 2020.03.24

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

小小 2020.03.24

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

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

来源:https : //www.w3schools.com/jsref/event_onchange.asp

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

所以,我的解释是:

  • (change)用户更改输入时触发
  • (ngModelChange) 在模型更改时触发,无论它是否连续执行用户操作
小卤蛋 2020.03.24

正如我在另一个主题中找到并写的那样-这适用于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,则该模型将已经具有新值。

资源

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android