Javascript (change) vs (ngModelChange) 角度

(change) vs (ngModelChange) in angular

提问by Ramesh Rajendran

Angular 1 does not accept onchange()event, it's only accepts ng-change()event.

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

Angular 2, on the other hand, accepts both (change)and (ngModelChange)events, which both seems to be doing the same thing.

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

What's the difference?

有什么不同？

which one is best for performance?

哪一种最适合性能？

ngModelChange:

ngModelChange：

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

vs change:

VS变化：

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

回答by omeralper

(change)event bound to classical input change event.

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

https://developer.mozilla.org/en-US/docs/Web/Events/change

https://developer.mozilla.org/en-US/docs/Web/Events/change

You can use (change) event even if you don't have a model at your input as

即使您的输入中没有模型，您也可以使用 (change) 事件作为

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

(ngModelChange)is the @Outputof ngModel directive. It fires when the model changes. You cannot use this event without ngModel directive.

(ngModelChange)是@OutputngModel 指令。当模型改变时它会触发。如果没有 ngModel 指令，您将无法使用此事件。

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

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

As you discover more in the source code, (ngModelChange)emits the new value.

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

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

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

So it means you have ability of such usage:

所以这意味着你有这样的使用能力：

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

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

Basically, it seems like there is no big difference between two, but ngModelevents gains the power when you use [ngValue].

基本上，两者之间似乎没有太大区别，但是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
}

assume you try the same thing without "ngModelthings"

假设你在没有“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
}

回答by CAK2

In Angular 7, the (ngModelChange)="eventHandler()"will fire beforethe value bound to [(ngModel)]="value"is changed while the (change)="eventHandler()"will fire afterthe value bound to [(ngModel)]="value"is changed.

在角7时，(ngModelChange)="eventHandler()"将触发之前绑定到值[(ngModel)]="value"而改变(change)="eventHandler()"会触发后绑定值[(ngModel)]="value"被改变。

回答by Disaster

As I have found and wrote in anothertopic - this applies to angular < 7 (not sure how it is in 7+)

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

Just for the future

只为未来

we need to observe that [(ngModel)]="hero.name"is just a short-cut that can be de-sugared to: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

我们需要观察的是[(ngModel)]="hero.name"仅仅是一个捷径，可以是去糖到：[ngModel]="hero.name" (ngModelChange)="hero.name = $event"。

So if we de-sugar code we would end up with:

因此，如果我们对代码进行脱糖，我们最终会得到：

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

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

or

或者

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

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

If you inspect the above code you will notice that we end up with 2 ngModelChangeevents and those need to be executed in some order.

如果您检查上面的代码，您会注意到我们最终有 2 个ngModelChange事件，这些事件需要按某种顺序执行。

Summing up: If you place ngModelChangebefore ngModel, you get the $eventas the new value, but your model object still holds previous value.If you place it after ngModel, the model will already have the new value.

总结：如果你放置ngModelChangebefore ngModel，你得到的$event作为新值，但你的模型对象仍然保持以前的值。如果将它放在 之后ngModel，模型将已经具有新值。

SOURCE

来源

回答by Julien

1 -(change)is bound to the HTML onchange event. The documentation about HTML onchange says the following :

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

Execute a JavaScript when a user changes the selected option of a <select>element

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

Source : https://www.w3schools.com/jsref/event_onchange.asp

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

2 -As stated before, (ngModelChange)is bound to the model variable binded to your input.

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

So, my interpretation is :

所以，我的解释是：

• (change)triggers when the userchanges the input
• (ngModelChange)triggers when the model changes, whether it's consecutive to a user action or not

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