md-selectコンポーネントonchangeイベントのモデル値をangle 2マテリアルデザインから更新するにはどうすればよいですか？

Question

私は以下のコードを使用して、md-selectマテリアルコンポーネントを使用して特定の条件に基づいてモデル値を更新しました。特定のオプションを最初に選択すると、md-selectコンポーネントのtacos-2がその時点でモデル値が適切に更新されます。しかしその後、md-selectコンポーネントで同じオプション、つまりtacos-2を再度選択し、その時点でモデルの値は正しく更新されません。

app.component.ts： -

export class App { 
    name:string; 
    foods = [ 
    {value: 'steak-0', viewValue: 'Steak'}, 
    {value: 'pizza-1', viewValue: 'Pizza'}, 
    {value: 'tacos-2', viewValue: 'Tacos'} 
    ]; 
    selectedValue: string = this.foods[0].value; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    onFoodChanged(event) { 
    if(this.selectedValue == "tacos-2") { 
     this.selectedValue = "pizza-1"; 
    } 
    event.value = this.selectedValue; 
    console.log(event) 
    } 
} 

app.component.html： -

<md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food" 
    (change)="onFoodChanged($event)"> 
    <md-option *ngFor="let food of foods" [value]="food.value"> 
     {{food.viewValue}} 
    </md-option> 
</md-select> 

デモ： - https://plnkr.co/edit/rugT0PtmpP1gtHDzWReY?p=preview

どのようにすることができますmd-select comのモデル値を更新するポニント・オン・イベント？

Answer 1

私はMD-選択変更イベント内でのsetTimeout（）関数を使用していました。今、私のモデル値が正しく更新されています。

onFoodChanged(event) { 
    setTimeout(()=> { 
    if(this.selectedValue == "tacos-2") { 
     this.selectedValue = "pizza-1"; 
    } 
    }, 0); 
} 

デモ： - https://plnkr.co/edit/iZFmK0Kfui9NSeYybk8Q?p=preview

Answer 2

（変更）イベントは値の変更にバインドされます。モデルの変更を確認する場合は、代わりに（ngModelChange）を使用してください。しかし、どちらの場合でも、値/モデルに実際の変更がない場合、あなたの（onFoodChanged）は起動されます。あなたはオプションが選択されるたびに検出するために、探している場合 だから、それは（クリック）をチェックすると良いでしょうオプションのイベント：

<md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food"> 
    <md-option (click)="onFoodChanged($event)" *ngFor="let food of foods" 
       [value]="food.value"> 
      {{food.viewValue}} 
     </md-option> 
    </md-select> 

DEMO