Question

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

<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

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

1 个答案: