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。它应检查“已检查”键是否为真，否则应该为假。

<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绑定不适用于多个复选框

1 个答案: