在Angular 2中使用ngModelChange更新模型值时如何调用方法？答案

【问题标题】：How to call a method when model value updated using ngModelChange in Angular 2?在Angular 2中使用ngModelChange更新模型值时如何调用方法？
【发布时间】：2017-12-18 17:46:36
【问题描述】：

当使用 ngModelChange 事件更改模型值时，我使用以下代码调用方法。

app.component.ts:-

@Component({
  selector: 'my-app',
  template: `
    <div>
     <input type="text" [(ngModel)]="name" (ngModelChange)="onModelChanged()"/>
     <input type="button" value="Submit" (click)="updateModelValue()"/>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  updateModelValue() {
     this.name = `Angular 2! v${VERSION.full}`
  }
  onModelChanged() {
    alert('Model Changed');
  }
}

演示：- https://plnkr.co/edit/4WosE8e3G822qbxVKJER?p=info

当我按下键盘上的任何键时，ngModelChange 事件已被触发。但是当我通过按钮单击事件更新模型值时，当时还没有触发 ngModelChange 事件。使用 ngModelChange 事件更改模型值时如何调用方法？

【问题讨论】：

我不明白。该方法已被调用更改。您想在单击按钮时调用 onModelChanged() 吗？
@br.julien，是的。我想在单击按钮时调用 onModelChanged()。

标签： angular angular2-template angular2-forms

【解决方案1】：

澄清一下，根据您在另一个答案中的 cmets（现已删除），ngModelChange 事件在您 click 按钮时未触发的原因是因为 ngModelChange 事件只是 Output() 的属性ngModel 指令。因此，要触发此事件，它需要在您的 html 元素上出现 ngModel 指令，并且分配给它的内容（如在 [(ngModel)]="name" 中）将是通过 ngModelChange 更新的值。因此，在您的第一个 input 元素中，您正确使用了 ngModel 及其输出属性 ngModelChange，但在 button 中输入了 input，您不能指望相同的行为。

希望这是有道理的。请查看这些链接，docs 和 source，了解更多信息。

【讨论】：

【解决方案2】：

您可以在点击处理程序中触发输入事件，见下文：

@Component({
  selector: 'my-app',
  template: `
       <div>
       <input #nameInput type="text" [(ngModel)]="name" (ngModelChange)="onModelChanged()"/>
       <input type="button" value="Submit" (click)="updateModelValue()"/>
       </div>
     `,
    })
export class App {
   name:string;
   @ViewChild('nameInput') nameInput:ElementRef;
   constructor() {
        this.name = `Angular! v${VERSION.full}`
    }
   updateModelValue() {
      const name = `Angular 2! v${VERSION.full}`;
      this.nameInput.nativeElement.value = name;
      this.nameInput.nativeElement.dispatchEvent(new Event('input'));
   }
   onModelChanged() {
      alert('Model Changed');
   }
 }

【讨论】：