Angular8响应式表单FormArray中动态ng-select2控件的数据绑定问题

问题根因 #

你遇到的ng-select2回显失败是多个配置和数据类型问题共同导致的，具体排查出的问题如下：

1. HTML中select2标签同时绑定了formControlName和[value]，二者冲突，响应式表单场景下不需要额外手动绑定value属性，且你绑定的workingDay是全局的选项列表变量，和单行表单的选中值完全不匹配。
2. multiple属性写为multiple="true"是字符串格式，ng-select2组件需要接收布尔类型的多选标识，必须用[multiple]="true"绑定。
3. 数据类型不匹配：你的workingDays选项里id和value都是字符串类型（比如'1'），但接口返回的item.workingDay是数字数组（比如[1,2,3]），类型不一致导致组件无法匹配到对应选项，自然无法回显。
4. 后续多余的循环patch逻辑完全冗余，反而可能覆盖正确的赋值，不需要保留。

修复步骤 #

第一步：修改HTML的select2配置 #

找到模板中的select2标签，修改为如下代码：

<select2 
  [data]="workingDays" 
  formControlName="workingDay"  
  (update)="onTagChanged(criteria, $event,i)"
  [multiple]="true" 
  name="workingDay"
>
</select2>

改动点：删除了冲突的[value]="workingDay"绑定，将multiple="true"改为[multiple]="true"布尔绑定。

第二步：修正数据类型匹配 #

修改getOverTimeRules方法中tempArr的赋值逻辑，把接口返回的数字转为字符串，匹配选项的value类型：

res.overTimeRules.forEach((item, index) => {
  let tempArr = [];
  for(var i = 0; i < item.workingDay.length; i++)
  {
    // 新增toString()转为字符串，匹配选项的value类型
    tempArr.push(item.workingDay[i].toString());
  }
  var objt = this.createTimePeriod(item.id, item.timePeriodId, item.startTime, item.endTime, item.percentage, tempArr) ;
  overTimeRulesArray.push(objt);
});

第三步：删除冗余的patch逻辑 #

把this.overTimeRuleForm.setControl('overTimeRules', overTimeRulesArray);之后的所有循环patch代码全部删除，创建FormGroup时已经传入了正确的值，不需要重复赋值。

补充注意事项 #

你现有代码中addTimePeriod方法调用createTimePeriod时只传了一个timeperiod对象，但createTimePeriod是按顺序接收多个参数的，这个逻辑也存在错误，后续新增条目时会出现问题，建议调整createTimePeriod的参数为接收对象，或者按顺序传参。

修改完成后重新测试即可正常回显ng-select2的选中值。

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