Миграция от ионного выбора с поиском к ионному выбору бросает проблему - PullRequest
Новая
       5

Миграция от ионного выбора с поиском к ионному выбору бросает проблему

0 голосов
/ 05 октября 2018

Я тестировал ионно-выбираемый, используя массив для выбора и поиска вариантов, так как ионно-выбираемый-поиск устарел.Однако у меня возникает проблема, что при выборе опций с новым ionic-selectable, все выбираются вместо отдельных элементов, и я не уверен, что я делаю неправильно.

Вот мой код 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>

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

My Diagnostics.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;
  }
}

Я, по сути, создал здесь стек-блиц, и вы можетепосмотрите, с какой ошибкой я сталкиваюсь: https://stackblitz.com/edit/ionic-selectable-on-search-upikeg

Вот плункер, который работает со старым ionic-select-searchable: http://plnkr.co/edit/3xxNuMSIqvli8Djv8F1A?p=preview

Есть идеи, что я делаю неправильно?

1 Ответ

0 голосов
/ 06 октября 2018

Проблема в том, что вы указываете этому компоненту использовать id для идентификации каждой опции: 

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

, но ваша модель не имеет id.Поэтому я бы рекомендовал добавить поле id к каждой сущности и использовать его в качестве itemValueField, или, если вы не хотите добавлять идентификатор, вы можете использовать name (только если каждый элемент имеетдругое имя).

Это рабочий Stackblitz , например, если вы измените компонент для использования свойства name вместо id в itemValueField: 

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