ionic-framework - ionic 4 : ionic-select is not selected if the model is a number

Question

我有以下用于 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>

/** typescript 片段 **/

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

 selectedId = colors[0].id;

Answer 1

我希望看到更多 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>