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

【问题标题】：ngModel bind won't work on multiple checkboxesngModel 绑定不适用于多个复选框
【发布时间】：2017-08-24 02:16:59
【问题描述】：

我有这样的数据

[{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

【问题讨论】：

你在真正的“权限”数组中有 id 键吗？您正在为不存在的键设置值
不要把答案放在问题中。把答案放在答案中。

标签： angular angular2-forms

【解决方案1】：

这是因为您使用 ngFor 来迭代该数组，并且您为每个项目设置了相同的名称属性。他们需要每个都是独一无二的，以保持不同的价值。试试这个，这将使名称权限0、权限1、权限2等。

<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>

【讨论】：

一个常见的错误是无线电输入都需要相同的名称但不需要复选框。
另外，如果您尝试绑定复选框的特定对象：permission[i].checked
最后一件事...始终使用 [value]="permission.id" 这将保留字符串、int 或 boolean 等的类型。
您不需要在“pernission”之后添加索引，因为“让权限的权限”语法通过数组的每次迭代将“权限”声明为临时模板变量。类似于在 ES6 javascript 中做同样的事情。 for (let item of array) { console.log(item); } 每次显示不同的项目，不需要索引。但是以 s 结尾的权限不是这样声明的，因此每次迭代都是静态的。
他们需要索引作为使复选框名称唯一的一种方式。就这些