Angular中基于JSON与ngModel构建复选框列表的问题排查

问题1：所有复选框默认勾选的原因及解决 #

你把[(ngModel)]绑定到了j.id，而j.id是非空字符串。Angular中复选框的ngModel需要绑定布尔值（true/false），非空字符串会被自动转换为true，导致所有复选框默认处于勾选状态。

解决方法：

• 在test数组的每个对象中添加一个用于控制勾选状态的布尔属性，比如checked，初始设为false：

test = [
    {id: 'model1', site: '1', label: 'Clocher', view: 'file_clocher', checked: false},
    {id: 'model2', site: '1', label: 'Moulin', view: 'file_moulin', checked: false},
    {id: 'model3', site: '1', label: 'Poisson', view: 'file_poisson', checked: false},
    {id: 'model4', site: '2', label: 'Lacs', view: 'file_lac', checked: false},
    {id: 'model5', site: '2', label: 'Relais', view: 'file_relais', checked: false},
    {id: 'model6', site: '3', label: 'Citadelle', view: 'file_citadelle', checked: false},
];

• 修改HTML中ngModel的绑定目标为这个新属性：

<input class="form-check-input" type="checkbox" [(ngModel)]="j.checked" (change)="displayData($event)" [name]="j.view"/>

问题2：event.target.name返回undefined的原因及解决 #

你用了插值语法name="{{j.view}}"来设置name属性，这种方式在Angular中虽能渲染出属性值，但事件触发时event.target的name属性可能未被正确绑定（结合ngModel时更易出现）。正确做法是使用属性绑定语法[name]="j.view"，让Angular正确维护属性与数据的关联。

更简洁的方式是直接在change事件中传入j.view，无需依赖事件对象：

<input class="form-check-input" type="checkbox" [(ngModel)]="j.checked" (change)="displayData(j.view)" [name]="j.view"/>

对应的TS方法修改为：

displayData(viewName: string){
  console.log(viewName);
}

这种写法既避免了事件对象的依赖，代码逻辑也更清晰。

完整修正后的代码 #

TS组件文件 #

test = [
    {id: 'model1', site: '1', label: 'Clocher', view: 'file_clocher', checked: false},
    {id: 'model2', site: '1', label: 'Moulin', view: 'file_moulin', checked: false},
    {id: 'model3', site: '1', label: 'Poisson', view: 'file_poisson', checked: false},
    {id: 'model4', site: '2', label: 'Lacs', view: 'file_lac', checked: false},
    {id: 'model5', site: '2', label: 'Relais', view: 'file_relais', checked: false},
    {id: 'model6', site: '3', label: 'Citadelle', view: 'file_citadelle', checked: false},
];

displayData(viewName: string){
  console.log(viewName);
}

HTML文件 #

<div *ngFor="let j of test">
  <div *ngIf="j.site == '1'" class="form-check">
    <input class="form-check-input" type="checkbox" [(ngModel)]="j.checked" (change)="displayData(j.view)" [name]="j.view"/>
    <label class="form-check-label">{{j.label}}</label>
  </div>
</div>

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