javascript - Angular 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>

客户.组件.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()进行比较，但没有成功

Obs:对象附件只有 2 个属性:id 和 name。

如有任何帮助，我们将不胜感激

Answer 1

您正在将复选框绑定(bind)到 selected对象的属性 accessory与 [(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 的配件。放。