Binding Array von IDs zu dynamisch generierten Kontrollkästchen in Angular4

Question

Guten Abend Entwickler, so habe ich dieses Problem beim Binden meiner Checkboxen generiert dynamisch auf Werte in einem Array. Im Prinzip habe ich folgendes in meiner users.template.html Datei:

<div *ngFor="let r of roles" class="checkbox"> 
    <label for=""> 
     <input type="checkbox" id="{{ r.name }}" (change)="onRoleChange(r.name, $event)" [checked]="userRoles.includes(r.name)"> {{ r.name }} 
    </label> 
</div> 

Im Grunde, was es tut, ist aktualisiert die Rollen ein Benutzer auf dem gegebene Kontrollkästchen Basis hat, die dynamisch erzeugt werden. Nun ist die (ändern) funktioniert wunderbar, aber die [geprüft] einen Fehler wirft sagen folgendes:

Kann nicht lesen Eigenschaft ‚enthält‘ undefinierter

Ich habe keine Ahnung, warum denn überall sah ich es weist mich darauf hin, diese Art von Bindung für diese Art von dynamischem Inhalt zu verwenden. Also alle Hinweise wären toll, wenn Sie sie bitte haben. Vielen Dank im Voraus für jeden Rat.

Answer 1

können Sie nicht vererbte Methoden eines Objekts einer bestimmten type direkt in einer Vorlage nach meinem Verständnis aufrufen. Sie können stattdessen eine Komponentenmethode aufrufen, die diese Berechnung für Sie vornimmt.

<input type="checkbox" id="{{ r.name }}" (change)="onRoleChange(r.name, $event)" [checked]="presentInUserRoles(r.name)"> 

Komponente

presentInUserRoles(role: string): boolean { 
return this.userRoles.includes(role); 
}