时间戳

首页 > 解决方案 > 离子可选，但在表单内进行多项选择时出错

angular - 离子可选，但在表单内进行多项选择时出错

问题描述

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

未捕获（承诺中）：TypeError: CreateListFromArrayLike 在 e.set [as value] 的非对象上调用

这涉及到很多代码，包括 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));
  }
}

我已经设法创建了一个堆栈闪电战，它也重现了我的问题。您可以看到，只要我删除[isMultiple]="true"，它就可以工作。对此的任何帮助将不胜感激。

标签： angularionic-frameworkionic3

解决方案

所以我一直在使用这个插件，它工作得很好，文档中有很多关于问题的信息。我在您的堆栈闪电战代码中注意到的一件事是在您的 Types 目录中带有 diagnostic.ts 您没有分配给您的数组的元素名称。这样做的好处是明确地包含您的值，即使它是一个值。您可以使用值的 ID 和值的名称。例如：

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

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

推荐阅读