Ionic 3中formControl绑定ion-select无法预填初始值问题

我正在开发Ionic应用，需要复用同一组件实现实体的创建与编辑表单页面。其中occasion字段为包含id、name等属性的对象，新增功能正常，但进入编辑页面时，其他字段均能预填，唯有ion-select无法加载初始值。

组件构造器代码：

this.editedWish = navParams.get('wish') || null;
if (this.editedWish) {
  this.isEdited = true;
  this.title = this.editedWish.title;
  this.description = this.editedWish.description;
  this.occasion = this.editedWish.occasion;
}
this.form = formBuilder.group({
  title: [this.title, Validators.required],
  description: [this.description],
  occasion: [this.occasion, Validators.required]
});

HTML模板代码：

<ion-item>
  <ion-select formControlName="occasion" interface="popover">
    <ion-option *ngFor="let occasion of occasions" [value]="occasion">
      {{occasion.name | translate }}
    </ion-option>
  </ion-select>
</ion-item>

问题原因 #

这是Angular表单处理对象类型值时的典型坑：Angular默认用引用相等性来匹配表单控件值和选项值。你从navParams拿到的editedWish.occasion，和occasions数组里的occasion对象虽然属性完全一样，但它们是内存里的两个独立引用，所以ion-select识别不出它们是同一个选项，自然无法预选中。

解决方案 #

有两种实用的解决方式，你可以根据场景选：

方案1：替换为数组内的匹配对象引用 #

在初始化表单前，从occasions数组里通过id找到和editedWish.occasion匹配的对象，用这个数组内的对象来初始化表单控件：

this.editedWish = navParams.get('wish') || null;
if (this.editedWish) {
  this.isEdited = true;
  this.title = this.editedWish.title;
  this.description = this.editedWish.description;
  // 关键：通过id匹配，获取数组内的对象引用
  this.occasion = this.occasions.find(o => o.id === this.editedWish.occasion.id);
}
this.form = formBuilder.group({
  title: [this.title, Validators.required],
  description: [this.description],
  occasion: [this.occasion, Validators.required]
});

这种方式让表单控件值和选项值指向同一个对象，Angular就能直接匹配并预选中。

方案2：自定义值对比函数（更推荐） #

如果不想修改原对象的引用，可以给ion-select加compareWith属性，告诉Angular怎么判断两个对象相等：

先修改HTML模板，添加[compareWith]：

<ion-item>
  <ion-select formControlName="occasion" interface="popover" [compareWith]="compareOccasions">
    <ion-option *ngFor="let occasion of occasions" [value]="occasion">
      {{occasion.name | translate }}
    </ion-option>
  </ion-select>
</ion-item>

然后在组件类里定义对比函数：

compareOccasions(occasion1: any, occasion2: any): boolean {
  // 两个对象都存在时用id判断相等，否则直接判断引用
  return occasion1 && occasion2 ? occasion1.id === occasion2.id : occasion1 === occasion2;
}

这种方式更灵活，尤其适合后端返回对象和本地数组对象引用不同的场景，不用额外修改初始值的赋值逻辑。

内容的提问来源于stack exchange，提问作者furry12