In my records table, each column begins with a checkbox. When a checkbox is clicked, the record's id is stored in an array using TypeScript:
onCheckboxClick(id) {
if (this.selectedInvoiceables.indexOf(id) > -1) {
this.selectedInvoiceables.splice(id, 1);
} else {
this.selectedInvoiceables.push(id);
}
if (this.selectedInvoiceables.length > 1) {
this.disableBulkEdit = false;
} else {
this.disableBulkEdit = true;
}
}
Here is the checkbox code:
<mat-checkbox
class="checkbox"
(change)="onCheckboxClick(invoice.id)"
id = "invoiceCheckbox{{invoice.id}}"
[checked]="selectedInvoiceables.indexOf(invoice.id) > -1"
> </mat-checkbox>
Although the checkboxes successfully store the ids when clicked, there seems to be an issue where clicking one checkbox will deselect another even though the value remains in the selectedInvoiceables array. Is the current check for the [checked] attribute not sufficient or being refreshed irregularly?