angular - ionic 4 : Set default ionic ion-select option

Question

努力在 <ion-select> 中设置默认选项控制。使用 v4 rc2 但这一直是一个问题，因为我开始使用晚期的 v4 测试版。
<ion-select>正确设置了默认选择，但我得到了小的向下插入符号。不显示所选选项。当我选择控件时，会显示警报并选择正确的选项。还是我做错了什么？

是否设置measureSetId的顺序vs 加载 measureSets[]事情？

想法？感谢您对此的任何帮助。

<ion-select name="measureSetSelect" [(ngModel)]="selectedMeasureSetId">
  <ion-select-option *ngFor="let measureSet of measureSets" [value]="measureSet.measureSetId">
    {{measureSet.name}}
  </ion-select-option>
</ion-select>

public measureSets: IMeasureSet[];
public selectedMeasureSetId: number;

ngOnInit() {
  this.measureSetsApiService.query().pipe(take(1)).subscribe(result => {
      this.selectedMeasureSetId = result.find(i => i.isDefault).measureSetId || 1;
      this.measureSets = result;
    });
}

Answer 1

当options列表包含对象，您需要使用 [ngValue]和 [compareWith]试试这个代码:

<ion-select name="measureSetSelect" [(ngModel)]="selectedMeasureSet" [compareWith]="compareById">
  <ion-select-option *ngFor="let measureSet of measureSets" [ngValue]="measureSet">
    {{measureSet.name}}
  </ion-select-option>
</ion-select>

在您的组件中:

compareById(o1, o2) {
    return o1.id === o2.id
  }

更新组件部分以将 ngModel 设置为对象:

public selectedMeasureSet: IMeasureSet;

ngOnInit() {
  this.measureSetsApiService.query().pipe(take(1)).subscribe(result => {
      this.selectedMeasureSet = result.find(i => i.isDefault) || result.find(i => i.id === 1);
      this.measureSets = result;
    });
}

还可以考虑引用此文档以进一步阅读: https://medium.com/@kastepanyan24/how-to-set-selected-option-dynamically-in-angular-6-85c99958cca5