部品のモデルの角度2の遅延更新

Question

私は角度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); 
    } 
} 

：私は、次のコードを持っていますコンソールは以前の値のままです。もう一度別の値を選択すると更新されますが、印刷された値は以前に選択された値です。それは1つの選択によって遅れたようです。

誰でもお手伝いします。

ありがとうございました。

Answer 1

valの値は、次のAngular2変更検出サイクルでのみ更新されます。

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

MyComponentで：onChanged方法で最新の値を使用するには、このような$event値を消費しますが、結合双方向使用する場合

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です。