Angular 2延迟了组件中model的更新

Question

我是Angular 2的新手，最近一直在尝试双向绑定。我有以下代码:

template.html

<select [(ngModel)]="val" (change)="onChanged()">
   <option>1</option>
   <option>2</option>
   <option>1</option>
</select>

component.ts

..//other code definitions here
export class MyComponent{
  val: number = 1; //edited this
  onChanged(){
    console.log(this.val);
  }
}

问题是，当下拉菜单中选择的值发生变化时，控制台输出的值仍然是以前的值。它只在我再次选择另一个值后更新，但打印的值仍然是先前选择的值。就像延迟了一次选择。

希望大家都能帮忙。

谢谢。

Answer 1

val值只会在下一个Angular2变更检测周期中更新。要在onChanged方法中使用最新的值，请像这样使用$event值:

<select [(ngModel)]="val" (change)="onChanged($event)">

In MyComponent:

onChanged(newVal){
  console.log(newVal);
}

Answer 2

当您使用双向绑定- [(ngModel)]时，请始终使用(ngModelChange)而不是(change):

<select [(ngModel)]="val" (ngModelChange)="onChanged()">
   <option>1</option>
   <option>2</option>
   <option>1</option>
</select>

这是工作的Plunker