Angular12动态FormArray加载数据时报forEach不存在如何解决？

你的两个报错本质都是接口字段定义和后端返回不匹配+方法名调用错误导致拿到的不是预期的数组类型，具体修改如下： #

1. 修正响应类型定义 #

后端返回的results下的数组字段名是gradings（带s），但你定义的PgsResponse类中字段名是grading（无s），字段名不匹配导致取到的值为undefined而非数组：

// 修改前
export class PgsResponse {
  results!: { grading: IPgs[]; };
}
// 修改后
export class PgsResponse {
  results!: { gradings: IPgs[]; };
}

2. 修正组件内的调用逻辑 #

2.1 修正服务方法名调用 #

你服务中定义的方法是getPgsById，但组件内错误调用了不存在的getGradingSetupById，同时要对应修改取值的字段名：

loadGradingById() {
 this.pgsService
  // 修正为服务中实际定义的方法名
  .getPgsById(this._id)
  .subscribe((data: PgsResponse) => {
    // 字段名和响应类型对齐，改为gradings
    this.gradingdata = data.results.gradings;
    this.gradingInfoForm.setControl(
      'gradings',
      this.SetExistingGradings(this.gradingdata || [])
    );
  });
}

2.2 补全表单初始化+方法触发 #

你当前没有初始化gradingInfoForm，也没有在ngOnInit中触发数据加载方法，补全逻辑：

ngOnInit(): void {
  // 先初始化表单，提前声明gradings为FormArray类型
  this.gradingInfoForm = this.fb.group({
    gradings: this.fb.array([])
  });
  this._id = this.route.snapshot.params['id'];
  // 触发数据加载
  this.loadGradingById();
}

报错原因说明 #

• 第一个类型报错：因为你取错了字段名，data.results.grading实际为undefined，类型校验时和声明的IPgs[]不匹配，甚至可能因为拼写问题意外拿到了单个IPgs对象
• 第二个运行时报错：传入SetExistingGradings的参数不是数组类型（是undefined或者单个对象），不存在forEach方法
  修改完成后两个报错都会消失，FormArray可以正常渲染已有数据。

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