从 ionic-select-searchable 迁移到 ionic-selectable 会引发问题

Question

我一直在测试 ionic-selectable 使用数组 select 并且 ionic-select-searchable 中的搜索选项已被弃用。但是，我遇到一个问题，当 selecting 使用新的 ionic-selectable 选项时，所有选项都是 selected 而不是单个项目，我不确定我在做什么错了。

这是我的 home.html 代码：

<ion-header>
    <ion-navbar>
        <ion-title>Ionic Selectable</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
  <ion-item>
    <ion-label>Diagnosis</ion-label>
    <ionic-selectable
      item-content
      [(ngModel)]="diagnosis"
      itemValueField="id"
      itemTextField="name"
      [items]="diagnoses"
      [canSearch]="true"
      (onChange)="diagnosisChange($event)">
    </ionic-selectable>
  </ion-item>
</ion-content>

我的home.ts:

import { Component } from '@angular/core';
import { IonicSelectableComponent } from 'ionic-selectable';
import { DiagnosisService } from '../../services';
import { Diagnosis } from '../../types';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  diagnoses: Diagnosis[];
  diagnosis: Diagnosis;

  constructor(
    private diagnosisService: DiagnosisService
  ) {
    this.diagnoses = this.diagnosisService.getDiagnoses();
  }

  diagnosisChange(event: {
    component: IonicSelectableComponent,
    value: any
  }) {
    console.log('diagnosis:', event.value);
  }
}

我的diagnosis.services.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators';
import { Diagnosis } from '../types';

@Injectable()
export class DiagnosisService {
  private diagnoses: Diagnosis[] = [
      {name: 'Hypothyroidism' },
      {name: 'Hyperthyroidism' },
      {name: 'Diabetes Type 1' },
      {name: 'Diabetes Type 2' }];

  getDiagnoses(page?: number, size?: number): Diagnosis[] {
    let diagnoses = [];

      this.diagnoses.forEach(diagnosis => {
        diagnoses.push(diagnosis);
      });

    if (page && size) {
      diagnoses = diagnoses.slice((page - 1) * size, ((page - 1) * size) + size);
    }

    return diagnoses;
  }
}

我基本上在这里创建了一个 stackblitz，你可以看到我遇到了什么错误： https://stackblitz.com/edit/ionic-selectable-on-search-upikeg

这是与较旧的 ionic-select-searchable 一起使用的插件： http://plnkr.co/edit/3xxNuMSIqvli8Djv8F1A?p=preview

知道我做错了什么吗？

Answer 1

问题是您告诉该组件使用 id 来识别每个选项：

<ionic-selectable
  item-content
  [(ngModel)]="diagnosis"
  itemValueField="id" <!-- Here! -->
  itemTextField="name"
  [items]="diagnoses"
  [canSearch]="true"
  (onChange)="diagnosisChange($event)">
</ionic-selectable>

但您的模型没有 id。所以我建议为每个实体添加一个 id 字段并将其用作 itemValueField，或者如果您不想添加 id，则可以使用 name (仅当每个项目都有不同的名称时）。

这是一个 working Stackblitz 例如，如果您修改组件以使用 name 属性而不是 id 在 itemValueField:

<ionic-selectable
  item-content
  [(ngModel)]="diagnosis"
  itemValueField="name" <!-- Here! -->
  itemTextField="name"
  [items]="diagnoses"
  [canSearch]="true"
  (onChange)="diagnosisChange($event)">
</ionic-selectable>

从 ionic-select-searchable 迁移到 ionic-selectable 会引发问题

Migrating from ionic-select-searchable to ionic-selectable throws an issue

typescript

ionic-framework

ionic2

ionic3

angular