Ionic 4：设置默认离子选择选项

Question

努力在<ion-select> 控件中设置默认选项。使用 v4 rc2，但自从我开始使用最新的 v4 测试版以来，这一直是个问题。

<ion-select> 正确设置了默认选择，但我得到了小的向下插入符号。不显示所选选项。当我选择控件时，会显示警报并选择正确的选项。还是我做错了什么？

设置measureSetId 与加载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