ドロップダウン要素のリストの変更を検出するにはどうすればよいですか？

Question

私はユーザーのリストを持っています。 { id: '123', name: 'Bob', State: 'Colorado' }

私が使用しているユーザーをレンダリング* ngFor：各ユーザーは、複合オブジェクトである

<div *ngFor="let u in users"> 
    {{ u.name }} 
    <select [(ngModel)]="u.state"> 
     <option *ngFor="let s in states" [value]="s">{{s}}</option> 
    </select> 
</div> 

すると選択値の変更 - 私はRESTのAPIの上にオブジェクトを保存したいです。

(change)="changeState(u)"を追加しようとしましたが、それはうまくいきません。私の(change)コールバックが実行された後、明らかにu.stateが更新されています。

私はループを持っていない場合は、私が参照私のドロップダウンを与えるだろう：#state、その後(change)="changeState(u, state.value)"

を使用する私の唯一の選択肢である$event.target.value使用するのですか？それともこれを行うためのより滑らかな方法がありますか？また、このソリューションは検証を奪います。

最初の2つの解決方法のいずれかが救済可能ですか？

Answer 1

あなたはngModelからngModelChangeイベントを分離することができます：

<select [ngModel]="u.state" (ngModelChange)="changeState($event)"> 
     <option *ngFor="let s in states" [value]="s">{{s}}</option> 
</select> 

、新しい選択値が直接changeState()に渡されます。