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。