In my application, I am facing an issue with a mat-table that displays data related to Groups. The table fetches more than 50 rows of group information from a data source, but initially only loads the first 14 rows until the user starts scrolling down. Alongside this table, there is an array of checkboxes which dynamically display values. I use @ViewChildren to retrieve the checkbox values (true/false).
@ViewChildren('groupCheckboxes') viewGroupCheckboxes: QueryList<CheckboxComponent>;
.....
Let me provide a scenario to illustrate the problem. Let's say we have groups ranging from agency A to Z, and data for groups A, B, Y are stored in the data source. When the page loads, checkboxes next to A, B, and Y should be already checked.
//In this example, when data for all groups A to Z has been loaded, the setupGroupCheckboxes() method will locate A, B, and Y in the data table and set their checkboxes to true.
setupGroupCheckboxes(): void {
for (const refItem of this.preSelectedGroups){
let matchingIndex = this.rowsGroups.findIndex(item => item.id === refItem.id);
if (matchingIndex !== -1) {
this.viewGroupCheckboxes.get(matchingIndex).checked = true;
this.groupCheckboxArray[matchingIndex] = true;
this.isGroupLoaded = true;
} else {
this.isGroupLoaded = false;
}
}
}
The issue arises after the initial form load where checkboxes beyond index 14 become inaccessible. For instance, trying to access the checkbox for Group Y at index 24 results in an undefined error because even though the group data is present in the array, the checkboxes for those groups (index 15 to 25) are not yet visible on the user's screen.
ERROR TypeError: Cannot set properties of undefined (setting 'checked').
I have explored various solutions but it seems that the number of rows initially loaded by the data table may be based on its height limitation (as reducing the height leads to fewer initial rows being loaded). Given that the current height of the data table cannot be further adjusted, I would appreciate any insights or ideas on how to overcome this challenge. Thank you!