ngModel 绑定不适用于多个复选框

Question

我有这样的数据

[{value: 6, name: "delete-wews", checked: false}
{value: 5, name: "update-user", checked: false}
{value: 4, name: "search-user", checked: true}
{value: 3, name: "list-user", checked: false}
{value: 2, name: "find-user", checked: false}
{value: 1, name: "create-user", checked: true}]

现在，在我的模板中，它看起来是这样的，但是当它显示在浏览器上时，它会检查所有复选框，即使其值为 false。它应该检查“checked”键是否为真，否则它应该为假。

<div class="checkbox" *ngFor="let permission of permissions">
      <label>
         <input type="checkbox"
            name="permissions"
            [(ngModel)]="permission.checked"
            value="{{permission.id}}">
            {{permission.name}}
     </label>
</div>

我的控制器代码是这样的 https://gist.github.com/eaponiente/cc108bfafb2789229e917283e0b8db09

Answer 1

这是因为您正在使用 ngFor 迭代该数组，并且为每个项目设置相同的 name 属性。它们都需要独一无二才能持有不同的价值观。试试这个，这将使名称变为permissions0、permissions1、permissions2等。

<div class="checkbox" *ngFor="let permission of permissions; let i = index">
  <label>
     <input type="checkbox"
        [name]="'permissions'+i"
        [(ngModel)]="permission.checked"
        value="{{permission.id}}">
        {{permission.name}}
 </label>