时间戳

首页 > 解决方案 > 当值是对象类型时，离子选择不显示选定的选项

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

问题描述

我将一个对象绑定到 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>

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

点击这里查看图片

标签： angularionic-frameworkionic5

解决方案

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

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

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

我建议您不要将对象用作ion-select-option.

由于您的对象中有键和值，因此您应该编写更清晰的代码。将关键部分保留在 的 value 属性中ion-select-option。

<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

推荐阅读