（更改）vs（ngModelChange） [英] (change) vs (ngModelChange) in angular

问题描述

（change） vs （ngModelChange） events哪一个最适合使用？为什么？

Angular 1不接受onchange事件，但只接受 ng-change 事件。
Angular 2同时接受两个事件（change）和（ngModelChange）。

---

在角度2中，两个事件都是相同的。哪一个最适合使用？

 < input type =textpInputText class = ui-widget ui-text
（ngModelChange）=clearFilter（）placeholder =查找> 
  

vs

 （change）=clearFilter（）placeholder =Find> 
  

解决方案

code>事件绑定到经典输入更改事件。

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

你可以使用（更改）事件，即使你不' t在你的输入中有一个模型作为

 < input（change）=somethingChanged（）> 
  

（ngModelChange）是<$ c ngModel指令的$ c> @Output 。它在模型更改时触发。没有ngModel指令，你不能使用这个事件。

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

当您在源代码中发现更多内容时，（ngModelChange）会发出新的值。

< a href =https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169 =noreferrer> https://github.com/angular/ angular / blob / master / packages / forms / src / directives / ng_model.ts＃L169

这意味着你有这种用法的能力： p>

 < input（ngModelChange）=modelChanged（$ event）> 
 
 modelChanged（newObj）{
 //用新值做某事
} 
  

基本上，两者似乎没有太大的区别，但当您使用时， ngModel ngValue] 。

 < select [（ngModel）] =data（ngModelChange）=dataChanged（$ event）name =数据> 
< option * ngFor =let currentData of allData[ngValue] =currentData> 
 {{data.name}} 
< / option> 
< / select> 
 dataChanged（newObj）{
 //这里是对象作为参数
} 
  

假定你在没有 ngModel 东西的情况下尝试同样的事情。

 < select（change）=changed（$ event）> 
< option * ngFor =let currentData of allData[value] =currentData.id> 
 {{data.name}} 
< / option> 
< / select> 
 
改变（e）{
 //事件作为参数，您必须手动查找selectedData 
 //使用e.target.data 
 
} 
  

(change) vs (ngModelChange) events Which one is best to use? and why?

Angular 1 does not accept the onchange event, but only accepts the ng-change event. Angular 2 accepts both events (change) and (ngModelChange).

---

In angular 2, both events are similarly doing the same. Which one is best to use? What about the performance of each?

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

解决方案

(change) event bound to classical input change event.

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

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

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

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.

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 ngModel events gains the power when you use [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 "ngModel things"

<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

}

这篇关于（更改）vs（ngModelChange）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！