如何从角度 2 材料设计中更新 md-select 组件更改事件上的模型值

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 组件更改事件上的模型值？

Answer 1

（

change）事件绑定到值更改。如果要检查模型更改，请改用 （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>

演示

Answer 2

我在 md-select 更改事件中使用了 setTimeout（） 函数。现在我的模型值正在正确更新。

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

演示：- https://plnkr.co/edit/iZFmK0Kfui9NSeYybk8Q?p=preview