Bind klicken und Kontrollkästchen ändern angular2

Question

Ich habe ein seltsames Problem mit Kontrollkästchen mit angular2 (Beta 17).

Ich versuche, die gleichen Kontrollkästchen als Elemente festlegen hat das Array und binden Sie die Änderung oder klicken Ereignis.

Zum Beispiel habe ich ein Array:

myObjects=[ 
    {value:true}, 
    {value:true}, 
    {value:false}, 
    {value:true} 
]; 

Und ich bin mit dem ngFor alle Kontrollkästchen erstellen:

<div *ngFor="let myObject of myObjects; let i = index" > 
    <input 
      type="checkbox" 
      [checked]="myObject.value" 
      (change)="updateCheckedOptions(i, $event)" 
    /> 
</div> 

Und schließlich habe ich eine Funktion in meiner Komponente:

@Input() myObjects; 

updateCheckedOptions(index,event){ 
    this.myObjects[index].value=event.target.checked; 
} 

Aber das Problem ist, dass das Kontrollkästchen nicht ändern, ich meine, wenn ich das Kontrollkästchen, wenn die erste Zustand wird geprüft, immer geprüft und umgekehrt.

Ich habe versucht mit (klicken), (ändern), [(ngModel)], aber es funktioniert nicht.

Danke!

Answer 1

Sie können ngModelChange überprüfen:

//This is your component 
 

 
@Input() myObjects; 
 

 
myObjects=[ 
 
    {value:true}, 
 
    {value:true}, 
 
    {value:false}, 
 
    {value:true} 
 
]; 
 

 
updateCheckedOptions(index,event){ 
 
    this.myObjects[index].value=event.target.checked; 
 
    console.log(index + " ---- " + event); 
 
}

<div *ngFor="let myObject of myObjects; let i = index" > 
 
    <input 
 
      type="checkbox" 
 
      [checked]="myObject.value" 
 
      (ngModelChange)="updateCheckedOptions(i, $event)" 
 
    /> 
 
</div>