当值是对象类型时，离子选择不显示选定的选项答案

【问题标题】：Ion-select does not show selected option when value is an object type当值是对象类型时，离子选择不显示选定的选项
【发布时间】：2020-10-09 19:01:29
【问题描述】：

我正在将一个对象绑定到 select-option 的 value 属性。

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

弹出窗口打开时不显示所选值。

Click here to view the image

【问题讨论】：

标签： angular ionic-framework ionic5

【解决方案1】：

您的数据绑定失败，因为 ion-select-option 中的 value 属性包含一个字符串，而 ion-select 的 value 属性包含一个对象。

需要绑定ion-select-option的value属性。

<ion-select-option [value]="{key:'abc',value:'ABC'}">ABC</ion-select-option>

我建议您不要将对象用作 ion-select-option 的值。

既然你的对象有key&value，你应该写一个更清晰的代码。将关键部分保留在ion-select-option的value属性中。

<ion-item>
    <ion-label>Choose</ion-label>
    <ion-select [(ngModel)]="myKey">
      <ion-select-option value="abc">ABC</ion-select-option>
      <ion-select-option value="pqr">PQR</ion-select-option>
      <ion-select-option value="xyz">XYZ</ion-select-option>
    </ion-select>
  </ion-item>

在您的组件中，声明一个变量 myKey 并为其赋值。

myKey='abc';

这是 Angular 中的 2 路数据绑定示例。在这里阅读更多：https://codecraft.tv/courses/angular/forms/template-driven/#_two_way_data_binding

【讨论】：