（变化）vs（ngModelChange）的角度

326

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

— 拉梅什·拉金德兰（Ramesh Rajendran）
source

2

我不想比较那些。我只想知道哪一个最适合表现？

— Ramesh Rajendran

6

是的，没有比较。如果您使用的是ngModel，则可以使用后面的版本，否则可以使用第一个。始终首选避免ngModel，因为这是两种方式的数据绑定，因此对性能不利

— Vamshi

2

编辑以强调“有什么区别”和“哪个更有表现力”以消除主观性，并投票决定重新开放。

— 鲁芬

12

在Angular 7中，（ngModelChange）=“ eventHandler（）”将在绑定到[[ngng）] =“ value”的值更改之前触发，而（change）=“ eventHandler（）”将在绑定到该值之后触发[（ngModel）] =“值”已更改。

— CAK2

4

顺便说一句，仅当焦点离开输入时才触发（更改）事件。如果要在每次按键后触发事件，则可以使用（输入）事件。

— 约翰·吉尔默

495

(change) 事件绑定到经典输入更改事件。

https://developer.mozilla.org/zh-CN/docs/Web/Events/change

即使输入中没有模型，也可以使用（更改）事件，如下所示：

<input (change)="somethingChanged()">

(ngModelChange)是@OutputngModel指令的。模型更改时将触发。如果没有ngModel指令，则无法使用此事件。

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

当您在源代码中发现更多内容时，将(ngModelChange)发出新值。

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

因此，这意味着您具有这种用法的能力：

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

基本上，两者似乎没有什么大的区别，但是ngModel使用时事件会获得力量[ngValue]。

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

假设您尝试了没有“ ngModel事物” 的相同事物

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

— 奥梅拉珀
source

1

如果我将更改事件与ngmodel对象一起使用会发生什么？

— 拉梅什·拉金德兰

6

@RameshRajendran我已经改善了答案。您仍然可以对ngModel对象使用change事件，但是change事件传递事件参数，ngModelChange事件传递新值。

— omeralper

1

是+1。但是我对ngmodelchange有问题，当您使用ctr + A清除文本框中的所有值时，ngModelChange不会触发。

— 拉梅什·拉金德兰

6

<input (ngModelChange)="modelChanged($event)">不正确，[ngModel]是必需的。

— e-cloud

3

某些操作，您无法执行(change)，在这种情况下，您可以执行(onClick)="yourFunction(youParameter)"

— jpmottin

83

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

— 2号
source

1

我刚刚在Angular 7.1中进行了测试，并在调用事件之前更新了ngModel的值。这就是我所使用的

— Jahrenski

它也可以在角度6中工作。+1以节省时间：)

— Hemadri Dasari

1

是不是反过来了？据Angular Docs ngModelChange视图模型更新后触发。

— 愤怒

3

在有关angular的最新文档中对此情况进行了描述：angular.io/guide/…–

— pioro90

4

在Angular 7.2中，确实会在更改值之前和更改之后(ngModelChange)触发该事件。感谢您提供的信息，超级有帮助！(change)

— 丹尼斯·阿梅林

15

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

资源

— 灾害
source

感谢您指出这一点！我遇到了这个问题，直到找到您的解释为止

— omostan

2

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

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

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

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

所以，我的解释是：

(change)当用户更改输入时触发
(ngModelChange) 在模型更改时触发，无论是否与用户操作连续

— 朱利安
source