When retrieving an array from a data object via API service call, I am attaching a checked attribute to ensure that checkboxes are selected in the component's ngOnInit().
My objective is to have only the checkboxes related to the data retrieved from the service call be selected in a master checkbox list.
Various methods have been attempted, such as for loops and .forEach() on the array.
this.filterService.GetTierContent(this.config.id, "MCC").subscribe(data
=> {
data.forEach(i => this.selectedMcc.push({ type: "MCC", data: i.data,
checked: true }));
});
for(var i=0; i < this.selectedMcc.length; i++){
var index = this.selectedMcc.findIndex(i => i.data == i);
if(this.selectedMcc[index].checked === true) {
this.chk1 = true;
}
else {
this.chk1 = false;
}
}
<div *ngFor="let a of apparel; let i = index">
<mat-checkbox value="{{a.id}}" [(ngModel)] ="chk1"
(change)="onChecked(a, $event)">
{{a.mccCode}}
</mat-checkbox>
</div>
Expected outcome:
[(ngModel)] will store either a true or false value based on the looping process. Only data arrays returned from the service should be pre-checked by default upon component load.
Current issue: checking one box applies the selection to all checkboxes.