如何设置离子选项的默认选择值？

Question

我使用的是 Ionic v2，显示页面时无法设置选定的值。

 <ion-select [(ngModel)]="company.form">
    <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>

我也尝试过 checked ，但这也不起作用。我怎样才能做到这一点？

 Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45

原文由 Perrier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您处理默认值 xor 对象，最简洁的方法是为 [compareWith] 属性提供比较函数。此函数在参数中接受 2 个对象，如果它们相等则返回 true。这样，模型中的现有值将在开始时被选择。如果在选择之外的模型中添加新数据，这也有效。

以下示例取自官方 Ionic 文档

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

compareFn(e1: Employee, e2: Employee): boolean {
  return e1 && e2 ? e1.id == e2.id : e1 == e2;
}

编辑：使用双等号使其适用于 Ionic 4（正如 Stan Kurdziel 在评论中建议的那样）

原文由 Nicolas Janel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

问题似乎是 ion-option 不喜欢 rc3 中的对象。我必须只使用对象的 id 部分并编写一个单独的 changehandler 来找到所需的对象并将其设置为一个值。

   <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
    <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
  </ion-select>

和更改处理程序：

 companyFormSelected(newform) {
    let selectedForm = this.forms.find((f)=>{
      return f.id === newform;
    });
    this.company.form=selectedForm;
}

这似乎是 rc3 中的错误，但我不知道在哪里可以报告错误。我确实 在离子论坛上开了一个话题。

原文由 Perrier 发布，翻译遵循 CC BY-SA 3.0 许可协议