2

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

4 回答 4

2

我希望看到更多 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>
于 2018-08-15T04:14:46.227 回答
1

这似乎是 Ionic 4 中的一个错误。如果您使用字符串而不是整数，它会起作用。虽然不是一个理想的解决方案。例如

 colors = [
     {id: '1', label: 'Red'},
     {id: '2', label: 'Yellow'},
     {id: '3', label: 'Green'}
 ]
于 2019-04-23T03:16:48.653 回答
0 
This code sample is working fine. They might fix the issue, right now.

.html 文件 

  <ion-select okText="Seç" cancelText="İptal" [(ngModel)]="selectedVersion" [compareWith]="compareWith">
      <ion-select-option *ngFor="let fv of firmwareVersions" [value]="fv.id">
          {{fv.versionNumber}}
      </ion-select-option>
  </ion-select>

.ts 文件

    selectedVersion: any;
    
    firmwareVersions: any[] = [
        {id: 1, versionNumber: 'frjkm3j03jrtm3r3m', description: 'initial version'},
        {id: 2, versionNumber: 'ererefecegfeteg33', description: '2. version'},
        {id: 3, versionNumber: 'fe3r3fhghxh4r2222', description: '3. version'},
        {id: 4, versionNumber: 'tty45yu54y5yy5yu5', description: '4. version'},
    ];
        
    compareWithFn = (o1, o2) => {
        return o1 && o2 ? o1.id === o2.id : o1 === o2;
    }
    
    compareWith = this.compareWithFn;

    constructor() {
        this.selectedVersion = this.firmwareVersions[0].id;
    }

于 2019-07-29T07:41:48.353 回答
0

我使用 ionChange 事件解决了这个问题。尝试这样的事情：

<ion-item>
     <ion-label>Select Color</ion-label>
     <ion-select (ionChange)="this.selectedId = event.detail.value" placeholder="Select">

         <ion-select-option *ngFor="let color of colors" [value]="color.id">
             {{color.label}}
         </ion-select-option>
     </ion-select>
 </ion-item>
于 2019-07-26T15:47:59.210 回答