Angular 2 retrieve ausgewählte Kontrollkästchen

Question

Ich habe diese Checkbox (ein Kunde kann viele Zubehörteile):

customer.component.html:

<div class="checkbox" *ngFor="let accessory of accessories"> 
<label> 
    <input type="checkbox" [(ngModel)]="accessory.selected" (ngModelChange)="onCheckboxChange(accessory)"> {{ accessory.name }} 
</label> 
</div> 

customer.component.ts:

onCheckboxChange(accessory: any) { 
    if (accessory.selected == true) { 
     this.selectedAccessories.push(accessory); 
    } else { 
     let i = this.selectedAccessories.indexOf(accessory); 
     if (i != -1) { 
      this.selectedAccessories.splice(i, 1); 
     } 
    } 
} 

Ich habe eine Methode, die ich die ausgewählten Kontrollkästchen in einem Array speichern kann:

customer: Customer; 
accessories: any[]; 
selectedAccessories: any[]; 

ngOnInit() { 
this.accessoryService.get().subscribe(
    accessories => this.accessories = accessories 
) 
if (this.routeParams.get('id')) { 
    let id = this.routeParams.get('id'); 
    this.getCustomer(id); 
} 
} 

getCustomer(id: number) { 
    this.customerService.getCustomer(id).subscribe(
    data => { 
    this.selectedAccessories = data.customer.accessories 
    this.customer = data.customer 
    } 
) 
} 

Es funktioniert gut, wenn ich überprüfe, ob das Objekt in der Datenbank gespeichert ist. Aber ich weiß nicht, wie ich das ausgewählte Zubehör zurück zu den Checkboxen füllen kann. Ich habe versucht, die Arrays mit indexOf() und map() zu vergleichen, aber ohne Erfolg

Obs: das Objekt Zubehör haben nur 2 Attribute: ID und Name.

Jede Hilfe wäre

Answer 1

Sie binden Ihre Kontrollkästchen, um das selected Attribut des Objekts accessory mit [(ngModel)]="accessory.selected" geschätzt. Das bedeutet, dass beim Aktivieren/Deaktivieren eines Kontrollkästchens der Wert accessory.selected aktualisiert wird. Es funktioniert auch umgekehrt: Wenn der Wert accessory.selected gesetzt ist, wird das Kontrollkästchen aktualisiert. Sie können diese Idee in den folgenden Plunker demonstriert sehen: Plunker - checkboxes

Wir zunächst eine Reihe von Zubehör-Objekten erstellen:

private accessories = [ 
    {name: 'A', selected: false}, 
    {name: 'B', selected: true} 
    ]; 

Beachten Sie, dass alle diese Zubehörteile einen Namen und einen ausgewählten Wert haben. Der Wert für Zubehör B ist auf true eingestellt. Sie können das Ergebnis beim ersten Laden der Seite sehen: Das Kontrollkästchen für Zubehör ist A ist deaktiviert (wegen selected: false), während das Kontrollkästchen für Zubehör B aktiviert ist (wegen selected: true). Wenn Sie ein Kontrollkästchen aktivieren/deaktivieren, können Sie das Ergebnis der in der Konsole gedruckten Eigenschaft selected sehen.

Dies bedeutet, dass Sie in Ihrem Code die selected-Eigenschaft der Objekte im Array accessories auf den entsprechenden Wert festlegen müssen.

Sie könnten auch ein bisschen weiter gehen: Sie hören jetzt das onCheckboxChange Ereignis, nur um eine Reihe von ausgewählten Zubehör zu verfolgen. Sie können dies komplett weglassen und nur das Array konstruieren, wenn es angefordert wird, indem Sie alle Zubehörteile durchlaufen und das Zubehör auswählen, das selected: true eingestellt hat.