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

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

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

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

(ngModelChange)是ngModel指令的@Output。它在模型更改时触发。没有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
}

基本上，两者之间似乎没有太大的区别，但当你使用[ngValue]时，ngModel事件获得了力量。

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

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

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

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

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

(ngModelChange)是ngModel指令的@Output。它在模型更改时触发。没有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
}

基本上，两者之间似乎没有太大的区别，但当你使用[ngValue]时，ngModel事件获得了力量。

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

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

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

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

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

所以，我的解释是:

(change)在用户更改输入时触发 (ngModelChange)在模型改变时触发，不管它是否连续于用户操作

根据我的经验(change)和(ngModelChange)有两种不同的用法。

(ngModelChange)在HTML渲染时触发，用户改变了该元素的值。 (change)当用户更改值并保留元素焦点时触发。

用法:

(ngModelChange):当你有关键的东西依赖于html时，你必须处理任何类型的更改。 (change):当您必须只处理用户所做的值更改时。

注意:使用(ngModelChange)时要小心，因为有时它会给你最大的调用堆栈问题，你的表单会卡住。

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

正如我在另一个主题中发现和写的那样——这适用于angular < 7(不确定在7+中如何)

只是为了未来

我们需要注意到[(ngModel)]="hero.name"只是一个可以去糖化的快捷方式:[ngModel]="hero.name" (ngModelChange)="hero.name = $event"。

所以如果我们去糖编码，我们最终会得到:

< select (ngModelChange) =“onModelChange()”[ngModel]=“英雄”。

or

<[ngModel]=“英雄”。”>

如果你检查上面的代码，你会注意到我们最后有2个ngModelChange事件，它们需要按一定的顺序执行。

总结:如果你把ngModelChange放在ngModel之前，你会得到$event作为新的值，但是你的模型对象仍然保留之前的值。 如果你把它放在ngModel之后，模型已经有了新值。

源