Ion-select绑定对象类型值时不显示选中选项问题

这个问题的核心原因是对象的引用匹配规则：你现在给ion-select-option的value赋值的是字符串形式的对象（比如"{key:'abc',value:'ABC'}"），而ion-select的[value]绑定的是真正的JavaScript对象——两者类型、引用完全不匹配，所以Ionic没法识别出哪个选项是已选中状态。

解决这个问题很简单，只需要把ion-select-option的value换成ngValue即可：ngValue专门用来支持绑定复杂类型（比如对象、数组），而value仅适用于字符串或基本数据类型。

修改后的基础代码 #

<ion-item>
  <ion-label>Choose</ion-label>
  <ion-select [value]="{key:'abc',value:'ABC'}">
    <ion-select-option [ngValue]="{key:'abc',value:'ABC'}">ABC</ion-select-option>
    <ion-select-option [ngValue]="{key:'pqr',value:'PQR'}">PQR</ion-select-option>
    <ion-select-option [ngValue]="{key:'xyz',value:'XYZ'}">XYZ</ion-select-option>
  </ion-select>
</ion-item>

更易维护的进阶写法 #

如果想让代码更整洁、避免重复定义对象，建议把选项数据抽离到组件的TypeScript代码中，这样能保证对象引用的一致性：

TypeScript 部分

// 组件类中定义选项数据和默认选中项
options = [
  {key:'abc',value:'ABC'},
  {key:'pqr',value:'PQR'},
  {key:'xyz',value:'XYZ'}
];
selectedOption = this.options[0]; // 默认选中第一个选项

HTML 部分

<ion-item>
  <ion-label>Choose</ion-label>
  <ion-select [(ngModel)]="selectedOption">
    <ion-select-option *ngFor="let opt of options" [ngValue]="opt">{{opt.value}}</ion-select-option>
  </ion-select>
</ion-item>

这种写法不仅能完美解决选中状态不显示的问题，后续修改选项数据也更便捷，还能避免手动重复定义对象导致的潜在问题。

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