Question

我使用下面的代码在使用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事件更改模型值时调用方法？

Answer 1

为了澄清，根据您在其他答案（现已删除）中的评论，当您ngModelChange按钮是因为click事件时，ngModelChange事件未触发的原因Output()指令的ngModel属性。因此，要触发此事件，需要在您的html元素上显示ngModel指令以及它分配给它的内容（如[(ngModel)]="name"中所示）将是其值，该值将通过ngModelChange更新。因此，在您的第一个input元素中，您正确使用了ngModel及其输出属性ngModelChange，但在button键入的input中，您可以＆＃39;期待相同的行为。

希望它有意义。请查看以下链接docs＆amp; source，了解更多信息。

Answer 2

您可以在点击处理程序中触发输入事件，请参阅以下内容：

a{border:solid 2px transparent;} // Add this with your other css property.
a:hover{
  border-color: lightblue;
}

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

2 个答案: