Case à cocher ne pas appliquer la vérification au chargement lors de l'utilisation de * ngFor dans Angular 2

Question

J'ai une liste dynamique de checkBox qui sont construits en utilisant *ngFor. Le modèle se met à jour correctement chaque fois que je vérifie manuellement les boîtes, mais si le modèle est préréglé pour avoir une case cochée, la boîte ne sera pas vérifiée au chargement.

<form action="demo_form.asp" method="get"> 
    <div *ngFor="let d of data; let in=index; trackBy:trackByIndex"> 
    <input type="checkbox" 
      name="value" 
      [(ngModel)]="data[in].value" 
      [(checked)]="data[in].value" 
      (change)="checkChanged($event)"/> 
    {{d.text}} 
    </div>  
</form> 

J'ai appris que vous avez besoin de nous trackBy lors de l'utilisation de primitives dans un ngFor alors voici ma trackByIndex:

public trackByIndex(index: number, data: TextValuePair): any { 
    return index; 
} 

Voici les données:

public data = [{ text: "Human", value: true }, { text: "Dog", value: false }] 

J'ai besoin cases à cocher à charger si un objet de la liste a value mis à "true"

Answer 1

a trouvé le problème. Il devient confus à l'intérieur du <form>. Supprimez le <form> et vous pouvez simplifier le code pour cela.

<div *ngFor="let d of data"> 
    <input type="checkbox" 
      name="data" 
      value="{{d.text}}" 
      [(ngModel)]="d.value" 
      (change)="checkChanged($event)"/> 
    {{d.text}} 
    </div> 

Il devrait fonctionner