Angular中用*ngFor生成复选框时[(ngModel)]报错求助

常见原因及修复步骤 #

1. 确保模型对象已正确初始化

Angular双向绑定要求绑定的目标对象/属性必须存在，否则会触发模板错误。如果accountLoginPrivilegeModel或其内部的activeSubaccountView、activeSubaccountTransfer未初始化，就会导致报错。

在组件类中提前初始化模型：

// 组件类中定义并初始化模型
accountLoginPrivilegeModel = {
  activeSubaccountView: {},
  activeSubaccountTransfer: {}
};

2. 预初始化每个项目的绑定属性

使用动态键（如cl.projectNumber）绑定时，需要确保每个项目对应的键在绑定对象中存在并设置初始值，否则Angular无法完成双向绑定。

修改项目列表加载代码，在添加项目到projectsList的同时初始化绑定属性：

let loggedData = JSON.parse(localStorage.getItem('loggedInfo'));
this.commonService.getProjectList(loggedData.value).then((response) => {
    this.allProjectList = response;
    console.log('this.allProjectList', response);
    // 清空现有列表，避免重复加载
    this.projectsList = [];
    for (var i = 0; i < Object.keys(response).length; i++) {
      const project = {
        id: response[i].id, 
        projectName: response[i].projectName, 
        projectNumber: response[i].projectNumber
      };
      this.projectsList.push(project);
      // 初始化当前项目的复选框默认状态
      this.accountLoginPrivilegeModel.activeSubaccountView[project.projectNumber] = false;
      this.accountLoginPrivilegeModel.activeSubaccountTransfer[project.projectNumber] = false;
    }
});

3. 修正模板中的name属性绑定

模板中name="cl.projectNumber"会将所有复选框的name设置为固定字符串cl.projectNumber，导致表单控件命名冲突，需用插值绑定动态设置name：

修改HTML模板中的复选框部分：

<tr *ngFor="let cl of projectsList; let i = index" [attr.data-index]="i">
  <td>
    <div style="width:150"><font style="font-size: 8pt;">{{cl.projectName}} - {{cl.projectNumber}}</font></div>
  </td>
  <td>
    <input class="form-check-input" type="checkbox" name="{{cl.projectNumber}}" [(ngModel)]="accountLoginPrivilegeModel.activeSubaccountView[cl.projectNumber]">
  </td>
  <td>
    <input class="form-check-input" type="checkbox" name="{{cl.projectNumber}}_transfer" [(ngModel)]="accountLoginPrivilegeModel.activeSubaccountTransfer[cl.projectNumber]">
  </td>
</tr>

注意：第二个复选框的name建议加上后缀（如_transfer），避免同一项目的两个复选框name重复。

4. 移除不必要的value属性

第一个复选框中的value="false"可直接移除，因为[(ngModel)]绑定的是布尔值，checkbox的选中状态由绑定的布尔值控制，value属性在此场景下无效。

内容的提问来源于stack exchange，提问作者saurav.rox