Question

这是我要实现的目标：我正在为用户创建一个简单的Ionic Selectable组件，使其能够选择值并提交。提交后，该值应以唯一ID（生成的日期和时间戳）保存在Firebase数据库中。我已经使用文本值来工作了，但是，在使用Ionic selectable时出现以下错误：

未捕获（承诺）：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();
    }
}

我的diagnostic.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));
  }
}

我设法创建了a stackblitz，它也重新创建了我的问题。您可以看到，一旦我删除[isMultiple]="true"，它就可以工作。任何帮助，将不胜感激。

Answer 1

因此，我一直在使用此插件，并且效果很好，文档中有很多有关问题的信息。我在堆栈闪电代码中注意到的一件事是在带有diagnostic.ts的Types目录中，您没有为数组分配元素名称。这样做的好处是，即使它是一个值，也显式包含您的值。您可以使用值的ID和值的名称。例如：

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

此外，我在您的html和ts文件中注意到您似乎正在使用异步搜索或虚拟滚动，但是您缺少diagnosisChange()函数上的一些代码，这些文件根据文档使用服务过滤数据。我会确保您遵循Examples。我建议的一件事是在存储到Firebase之前，确保ionic可选功能正常工作。当然，selectable元素将作为键值对存储在表单中，因此请确保在提交表单时正确输入该值。

Answer 2

可能为时已晚，但我希望这对遇到相同情况的人有所帮助。因此，通过一点调试，我发现当您添加isMultiple属性并且还想定义默认值时，可以将此默认类型设置为数组而不是对象或字符串

离子选择，表单中的多项选择出错

2 个答案: