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（）进行比较，但没有成功

Obs：Object附件只有2个属性：id和name。

任何帮助将不胜感激

Answer 1

您将复选框绑定到对象selected的{{1}}属性accessory。这意味着无论何时选中/取消选中复选框，都会更新[(ngModel)]="accessory.selected"值。它也可以反过来：如果设置了accessory.selected值，则会更新复选框。你可以在下面的Plunker中看到这个想法：Plunker - checkboxes

我们首先创建一个配件对象数组：

accessory.selected

请注意，所有这些附件都有名称和选定值。附件B的值设置为private accessories = [ {name: 'A', selected: false}, {name: 'B', selected: true} ];。您可以在第一次加载页面时看到结果：附件的复选框是A未选中（因为true），而附件B的复选框被选中（因为selected: false）。如果选中/取消选中一个复选框，则可以在控制台中看到selected: true属性的结果。

这意味着在您的代码中，您需要将selected数组中对象的selected属性设置为适当的值。

您还可以进一步了解：您现在正在收听accessories事件，以便跟踪一系列所选配件。您可以完全忽略它，并且只在迭代所有附件并挑选出onCheckboxChange设置的附件时才构造该阵列。

Angular 2检索选中的复选框

1 个答案: