从离子选择可搜索迁移到离子可选会引发问题

Question

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

这是我家.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>

我的家：

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);
}
}

我的诊断服务：

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;
}
}

我基本上在这里创建了一个堆栈闪电战，您可以看到我遇到的错误： https://stackblitz.com/edit/ionic-selectable-on-search-upikeg

这是与较旧的离子选择可搜索一起使用的 plunker： 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(仅当每个项目具有不同的名称时(。

这是一个有效的堆栈闪电战，例如，如果您修改组件以使用name属性而不是itemValueField中的id：

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