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

Answer 1

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

Answer 2

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

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

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

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

2 个答案: