2016-05-05 1 views
2

Ich habe ein seltsames Problem mit Kontrollkästchen mit angular2 (Beta 17).Bind klicken und Kontrollkästchen ändern angular2

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!

+0

ich nur kopiert und Ihr Code in einem [Plunker] eingefügt (http://plnkr.co/edit/SjIRhAwa56ScfrJDZml3?p=preview) es funktioniert gut. Obwohl ich denke, "Objekt" ist ein reserviertes Wort. – Abdulrahman

+0

Korrektur, ich habe gerade überprüft, 'Objekt' ist kein reserviertes Wort. Es fühlte sich einfach nicht richtig an :) – Abdulrahman

+0

Hallo, der Name der Objekte ist nur ein symbolischer Name, ich habe die Frage mit anderem Namen bearbeitet und den Typ der Variablen "myObjects" hinzugefügt. Danke! –

Antwort

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>

+0

Garbzade dies funktioniert nicht mit eckigen 4 Material und nativen HTML Radio Kontrollkästchen ebenfalls. unten ist mein Code {{ {{list.value}} {{list.value}}

Verwandte Themen