角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。

任何幫助，將不勝感激

來源

2016-06-10 Kayo Lima

你想從數據庫檢索數據時檢查您的複選框？ –

你是你的複選框以[(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設置的配件。

來源

2016-06-11 07:18:43 Sjoerd

角2個檢索選擇複選框

回答

相關問題