Angular 如何将服务返回的数据正确赋值给FormArray控件

问题原因 #

patchValue 对 FormArray 的赋值逻辑为仅匹配FormArray中已经存在的控件，你初始化时 actors FormArray 为空数组，没有对应的 FormGroup 控件，直接传入后端返回的演员数组时，不会自动生成对应数量的表单控件，因此只会填充已有的控件，出现仅显示第一条数据的问题。

解决步骤 #

1. 确认已声明 actors FormArray 的快捷获取 getter（你现有代码的 addActor 方法已经用到了 this.actors，如果没有的话补充如下代码即可）：

get actors(): FormArray {
  return this.form.get('actors') as FormArray;
}

2. 修改接口返回后的赋值逻辑：先清空 FormArray 原有控件，遍历后端返回的演员列表逐个创建对应的 FormGroup 加入 FormArray，再给其他普通字段赋值即可：

this.moviesService.getMovie(this.movieId).subscribe(movieData => {
  this.movie = movieData;
  // 清空原有表单控件
  this.actors.clear();
  // 遍历演员列表生成对应表单控件
  this.movie.actors.forEach(actorItem => {
    this.actors.push(this.fb.group({
      actor: actorItem.actor,
      role: actorItem.role
    }))
  });
  // 填充其他普通字段
  this.form.patchValue({
    title: this.movie.title
  })
})

修改完成后，后端返回多少条演员数据，就会自动生成对应数量的表单行，所有字段值都会正确填充，原有的新增、删除演员逻辑无需修改即可正常使用。

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