角2个检索选择复选框

问题描述：

我有这个复选框（一个客户可能有许多配件）：角2个检索选择复选框

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：对象附件只有2个属性：id和name。

任何帮助，将不胜感激

你想从数据库检索数据时检查您的复选框？ –

答

你是你的复选框以[(ngModel)]="accessory.selected"结合对象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属性的结果。

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

您还可以进一步了解这一点：您现在正在聆听onCheckboxChange活动，以跟踪所选配件的阵列。你可以把它全部留出来，只在需要时重复所有附件并挑选那些有selected: true设置的配件。

角2个检索选择复选框

相关推荐