Угловые 2 извлекать выбранные чекбоксы

Question

У меня есть этот флажок (клиент может иметь множество аксессуаров):

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); 
     } 
    } 
} 

У меня есть метод, который я могу сохранить выбранные флажки в одном массиве, например:

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 
    } 
) 
} 

Он работает нормально, когда я проверяю, что объект сохраняется в базе данных. Но я не знаю, как я могу заполнить выбранные аксессуары обратно на флажки. Я попытался сравнить массивы с indexOf() и map(), но без успеха

Обс: Аксессуар объекта имеет только 2 атрибута: id и имя.

Любой помощь будет оценен

Answer 1

Вы связывание ваших флажков атрибута объекта accessoryselected с [(ngModel)]="accessory.selected". Это означает, что всякий раз, когда вы устанавливаете/снимаете галочку, значение accessory.selected обновляется. Он также работает наоборот: если установлено значение accessory.selected, флажок обновляется. Вы можете видеть, что идея продемонстрирована в следующем Plunker: Plunker - checkboxes

Сначала мы создаем массив объектов аксессуаров:

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

Обратите внимание, что все эти аксессуары имеют имя и выбранное значение. Значение для аксессуара B установлено на true. Вы можете увидеть результат при первой загрузке страницы: флажок для аксессуара - A не установлен (из-за selected: false), а флажок для аксессуара B проверен (из-за selected: true). Если вы установите флажок или снимите флажок, вы можете увидеть результат свойства selected, напечатанного на консоли.

Это означает, что в вашем коде вам нужно будет установить свойство selected объектов в массиве accessories на соответствующее значение.

Вы также можете пойти немного дальше: вы теперь слушаете событие onCheckboxChange, чтобы отслеживать множество выбранных аксессуаров. Вы можете оставить это полностью и только построить этот массив, когда его запросят, итерации по всем аксессуарам и выбора тех аксессуаров, которые имеют selected: true.