响应式表单环境下PrimeNG表格无法正确Patch数组数据问题求助

问题原因 #

两个点共同导致报错、仅第一行能填充：

1. 你调用API返回的响应数据里携带了productId字段，而你给FormGroup赋值用的是setValue方法，这个方法要求传入的对象字段必须和FormGroup里定义的控件完全一一对应，多出来的字段就会触发「找不到对应控件」的报错。报错会导致JS执行中断，所以只有第一行完成了填充，后面的行都没执行到赋值逻辑。你之前用的静态数据没有productId字段，所以不会触发这个问题。
2. 你在addControls方法里只定义了name/price/days三个表单控件，但模板里还用到了description和minValue两个控件，这两个控件缺失也会触发同类报错，之前静态数据能正常运行是巧合，本质上属于代码隐患。

解决方案 #

按下面的步骤修改即可：

1. 把populateData方法里的setValue替换为patchValue，这个方法只会匹配FormGroup中已存在的控件，自动忽略多余字段，不会因为多出来的productId报错。
2. 补全addControls方法里的表单控件，把模板用到的description和minValue也加上。

修改后的核心代码示例：

// 补全表单控件
private addControls() {
  return new FormGroup({
    name: new FormControl(''),
    price: new FormControl(''),
    days: new FormControl(''),
    description: new FormControl(''),
    minValue: new FormControl('')
  });
}

private populateData() {         
  this.values.forEach((data, index) => {
    this.onAdd();
    // 把setValue换成patchValue
    this.shippingDetails.controls[index].patchValue(data);
  });    
}

修改后就能正常把所有行的数据填充进去，控制台也不会再抛对应错误。

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