Ionic3使用FormBuilder构建ion-select时触发运行时错误

这个错误的核心原因很明确：你在ion-select的*ngFor指令里绑定的不是一个可迭代的数组，而是单个值（比如你代码里提到的evaluator.id，它是单个ID字符串/数字，不是数组），Angular无法对单个值执行diff操作来生成选项列表。

下面我给你一个完整的、结合FormBuilder的动态ion-select实现示例，贴合你的业务场景（选择evaluator）：

1. 组件类代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
// 导入你需要的其他依赖

@Component({
  selector: 'your-component',
  templateUrl: 'your-component.html'
})
export class YourComponent {
  cpoForm: FormGroup;
  evaluators: any[] = []; // 确保这是一个数组，用来存储 evaluator 列表

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public modalCtrl: ModalController,
    public formBuilder: FormBuilder
  ) {
    // 先初始化表单
    this.initForm();
    // 再加载 evaluator 数据
    this.fillEvaluators();
  }

  initForm() {
    this.cpoForm = this.formBuilder.group({
      evaluatorId: [''] // 定义表单控件，用来绑定ion-select的值
      // 其他表单控件...
    });
  }

  fillEvaluators() {
    // 模拟获取 evaluator 数据的逻辑，实际可能是调用API
    // 确保最终赋值给 this.evaluators 的是一个数组
    this.evaluators = [
      { id: '1', name: 'Evaluator A' },
      { id: '2', name: 'Evaluator B' },
      { id: '3', name: 'Evaluator C' }
    ];
  }
}

2. 模板代码 #

<form [formGroup]="cpoForm">
  <ion-item>
    <ion-label>选择评估人</ion-label>
    <ion-select formControlName="evaluatorId">
      <!-- 这里*ngFor的数据源是evaluators数组，不是单个值 -->
      <ion-option *ngFor="let evaluator of evaluators" [value]="evaluator.id">
        {{ evaluator.name }}
      </ion-option>
    </ion-select>
  </ion-item>

  <!-- 其他表单控件... -->
</form>

常见错误排查点 #

• 检查fillEvaluators()方法：确认你是把数据赋值给this.evaluators数组，而不是单个对象或者其他非数组类型
• 检查模板里的*ngFor：确保你写的是*ngFor="let evaluator of evaluators"，而不是*ngFor="let evaluator of evaluator.id"（这是最容易犯的笔误）
• 如果是异步加载数据（比如HTTP请求），确保在数据返回前evaluators是一个空数组，而不是undefined或者null，可以在声明时就初始化为空数组evaluators: any[] = []

内容的提问来源于stack exchange，提问作者Prashant