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 迭代该数组，并且您正在为每个项目设置相同的名称属性。他们需要每个都是独一无二的，以保持不同的价值。试试这个，这将使名称 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>

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

ngModel bind won't work on multiple checkboxes

angular2-forms

angular