Angular 2无法使ngModel与复选框一起正常工作

Question

我有一个编辑表单，其中数据来自数据库，其中包含一个由名称和选定属性组成的角色对象数组。我有一个数组中的每个角色对象的复选框。加载表单时，即使查看所选属性为true的对象，也不会检查该复选框。如果我检查一个复选框，下面的标签中的role.selected值会发生变化，所以我不确定为什么复选框在表单第一次加载时不会被选中。我试过添加[value]="role.selected"和[checked]="role.selected"，这并没有改变任何东西。任何帮助是极大的赞赏。我确信它看起来很简单，几个小时后我看不到它。

<div class="checkbox" *ngFor="let role of userToEdit.allRoles"> 
    <label><input type="checkbox" name="role" [(ngModel)]="role.selected" >{{role.name}}, {{role.selected}}</label> 
</div> 

Answer 1

所有的输入都应该有一个独特的名称。

<div class="checkbox" *ngFor="let role of roles; let i = index"> 
    <label><input type="checkbox" name="role_{{ i }}" [(ngModel)]="role.selected" >{{role.name}}, {{role.selected}}</label> 
</div> 

Working demo。