Angular 2延迟了组件

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

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

此处working Plunker。