ng-multiselect-dropdown回填值显示但对应复选框未选中问题

API 探路者

2026-10-3

ng-multiselect-dropdown回填后复选框未选中解决方案

核心问题根因

选中值格式不匹配：你在dropdownSettings中配置了idField: 'id'作为选项唯一匹配标识，组件会通过id字段比对选中值和下拉列表选项是否对应。但你回填时仅往getDropdownValues中推入了sectionName字符串，没有携带对应id，组件无法匹配到对应选项，因此复选框不会标记为选中，仅能显示文本内容。
表单API混用冲突：你同时在组件上绑定了[(ngModel)]（模板驱动表单API）和formControlName（响应式表单API），两种表单体系混用会导致数据同步异常。

修正回填数据格式
回填时传入和dropdownList项结构一致的对象，必须包含id和sectionName字段，将原有回填代码：

this.getDropdownValues.push(JSON.parse(list).sectionName);

修改为：

const sectionData = JSON.parse(list);
this.getDropdownValues.push({
  id: sectionData.id,
  sectionName: sectionData.sectionName
});

移除冗余的ngModel绑定
删除HTML代码中的[(ngModel)]="getDropdownValues"属性，仅保留formControlName="sections"即可，响应式表单会直接通过FormControl管理选中值，无需额外绑定ngModel。
修正后的HTML代码：
```
<ng-multiselect-dropdown
     [placeholder]="'Select section'"
     [settings]="dropdownSettings"
     [data]="dropdownList"
     formControlName="sections"
>
</ng-multiselect-dropdown>
```