时间戳

首页 > 解决方案 > Ionic 4：如果模型是数字，则不选择离子选择

ionic-framework - Ionic 4：如果模型是数字，则不选择离子选择

问题描述

我有以下用于 html 和 javascript 的代码片段。请注意，id是类型number。加载页面时，即使model具有第一个选项的值，也不会选择第一个选项。

笔记。如果我将id字段设置为string.

/** HTML 片段 **/

 <ion-item>
     <ion-label>Select Color</ion-label>
     <ion-select [(ngModel)]="selectedId" placeholder="Select">

         <ion-select-option *ngFor="let color of colors" [value]="color.id">
             {{color.label}}
         </ion-select-option>
     </ion-select>
 </ion-item>

/** 打字稿片段 **/

 colors = [
     {id: 1, label: 'Red'},
     {id: 2, label: 'Yellow'},
     {id: 3, label: 'Green'}
 ]

 selectedId = colors[0].id;

标签： ionic-frameworkangular6ionic4

解决方案

我希望看到更多 Typescript 代码，但基本上在您的.ts文件中，您将拥有：

selectedId: number;

constructor () {
 this.selectedId = colors[0].id || 1
}

在 JavaScript 中，如果你在一个字符串前面加上一个 + 你会得到一个整数，所以在你的html 

<ion-item>
     <ion-label>Select Color</ion-label>
     <ion-select [(ngModel)]="selectedId" placeholder="Select">

         <ion-select-option *ngFor="let color of colors" [value]="+(color.id)">
             {{color.label}}
         </ion-select-option>
     </ion-select>
 </ion-item>

推荐阅读