Ионно-выбираемый с ошибкой при множественном выборе в форме

Question

Вот что я пытаюсь достичь: я делаю простой компонент Ionic Selectable, чтобы пользователь мог выбрать значение и отправить его.При отправке значение должно быть сохранено в базе данных Firebase под уникальным идентификатором (сгенерированная отметка даты и времени).У меня это работает с использованием текстового значения, однако при использовании Ionic selectable я получаю следующую ошибку:

Uncaught (в обещании): TypeError: CreateListFromArrayLike вызывается для необъекта в e.set[в качестве значения]

В этом задействовано много кода, включая коды Firebase, но, поскольку это работает, я просто публикую свои соответствующие коды.Пожалуйста, дайте мне знать, нужна ли какая-либо дополнительная информация, чтобы обойти эту ошибку.

Это на самом деле работает, если я не добавляю опцию [isMultiple] в форме, однако, когда я добавляю это, я получаюэта ошибка.

Вот мой файл home.html:

<ion-header>
    <ion-navbar>
        <ion-title>Ionic Selectable</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <form [formGroup]="form" margin-bottom>
    <ion-item>
      <ion-label>Diagnosis</ion-label>
      <ionic-selectable
        item-content
        formControlName="diagnosis"
        [items]="diagnoses"
        [isMultiple]="true"
        [canSearch]="true"
        (onChange)="diagnosisChange($event)">
      </ionic-selectable>
    </ion-item>
              <div margin-top padding>
                  <button margin-top round ion-button block [disabled]="!form.valid">Submit</button>
              </div>
    </form>
</ion-content>

Мой файл home.ts:

import { Component } from '@angular/core';
import { IonicSelectableComponent } from 'ionic-selectable';
import { IonicPage, NavController, ViewController, NavParams } from 'ionic-angular';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { DiagnosisService } from '../../services';
import { Diagnosis } from '../../types';

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

  constructor(
    private view: ViewController,
    private diagnosisService: DiagnosisService,
    private formBuilder: FormBuilder
  ) {
    this.diagnoses = this.diagnosisService.getDiagnoses();
    this.diagnosisControl = this.formBuilder.control(this.diagnoses[0],
      Validators.required);
    this.form = this.formBuilder.group({
      diagnosis: this.diagnosisControl
    });
  }

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

submit() {
        this.close();
    }

close() {
        this.view.dismiss();
    }
}

Мой файл диагноза.service.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[] =
    ['Hypothyroidism', 'Hyperthyroidism', 'Diabetes Type 1', '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;
  }

  getDiagnosesAsync(page?: number, size?: number, timeout = 2000): Observable<Diagnosis[]> {
    return new Observable<Diagnosis[]>(observer => {
      observer.next(this.getDiagnoses(page, size));
      observer.complete();
    }).pipe(delay(timeout));
  }
}

Мне удалось создать стек стека , который также воссоздает мою проблему.Вы можете видеть, что, как только я удаляю [isMultiple]="true", это работает.Любая помощь с этим будет оценена.

Answer 1

Так что я использовал этот плагин, и он работает очень хорошо, и в документации есть много информации о проблемах.Одна вещь, которую я заметил в вашем блиц-коде стека, находится в вашем каталоге Types с Diagnostic. У вас нет имен элементов, назначенных вашему массиву.Преимущество этого заключается в том, чтобы явно указывать ваши значения, даже если это одно значение.Вы можете использовать идентификатор значений и имя ваших значений.например:

export class Diagnosis {
    public id: number;
    public name: string;
}

Кроме того, я заметил, что в ваших html и ts файлах вы, похоже, используете либо асинхронный поиск, либо виртуальную прокрутку, но вам не хватает некоторого кода в вашей функции diagnosisChange(), чтобыфильтровать данные с вашим сервисом в соответствии с документами.Я хотел бы убедиться, что вы следуете за примерами .Одна вещь, которую я бы порекомендовал, это убедиться, что функциональность вашего ионного выбора работает правильно перед сохранением в firebase.Конечно, выбираемый элемент будет храниться в форме пары ключ-значение в вашей форме, поэтому убедитесь, что он отображается правильно при отправке формы.