角2チェックボックスを使用してngModelを正しく動作させることができません

Question

名前と選択したプロパティで構成されるロールオブジェクトの配列を持つデータベースからデータを取得する編集フォームがあります。配列内の各ロールオブジェクトのチェックボックスがあります。フォームがロードされると、選択されたプロパティが真であるオブジェクトを調べても、チェックボックスはチェックされません。チェックボックスをオンにすると、下のラベルの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。