Good day guys. I am currently using ngx-mat-multi-sort. When I try to sort the error occurs which is Cannot read properties of undefined (reading ‘actives’)
at TableData.onSortEvent (table-data.ts:69:49).
Anyone has an idea what seems to be the problem ?. Is it timing issue ? that causes the sorting to fail ?. Thanks and highly appreciated.
#html code
<table
mat-table
[dataSource]="closureListTable.dataSource"
matMultiSort
(matSortChange)="closureListTable.onSortEvent()"
>
<ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
<th mat-multi-sort-header="{{column}}" mat-header-cell *matHeaderCellDef>
{{ getColumnHeader(column) }}
</th>
<td mat-cell *matCellDef="let element">
<div class="td-value-name">
{{ getColumnValue(element, column) }}
</div>
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"
></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
></tr>
</table>
#ts code
displayedColumns: string[] = [];
closureListTable: TableData<IStoreClosureProgram>;
this.closureListTable = new TableData<any>([]);
ngOnInit(): void {
// NOTE: do not initialze MatMultiSortTableDataSource here because `this.sort` may not be loaded yet
}
ngAfterViewInit(): void {
this.selectedTab = this.selectedTab || 'FL'; // Set default tab if not already set
this.displayedColumns = this.columnsMapping[this.selectedTab] || this.columnsMapping['FL'];
setTimeout(() => {
this.initTable();
this.initSearch();
}, 5000);
}
initSearch(): void {
if (this.searchInput?.nativeElement) {
fromEvent<any>(this.searchInput.nativeElement, 'keyup')
.pipe(
map((event) => event.target.value),
startWith(''),
debounceTime(500),
distinctUntilChanged(),
switchMap(async (search) => {
this.closureListTable.pageIndex = 0;
this.getData();
})
)
.subscribe({ complete: noop });
}
}
initTable() {
this.closureListTable.dataSource = new MatMultiSortTableDataSource(
this.sort,
this.CLIENT_SIDE
);
this.closureListTable.nextObservable.subscribe(() => {
this.getData();
});
this.closureListTable.sortObservable.subscribe(() => {
console.log("1234")
this.getData();
});
this.closureListTable.previousObservable.subscribe(() => {
this.getData();
});
this.closureListTable.sizeObservable.subscribe(() => {
this.getData();
});
if (
(!!this.storeClosureAcessSettings?.ReceivingStoreList &&
this.storeClosureAcessSettings?.ReceivingStoreList !== 'None') ||
(!!this.storeClosureAcessSettings?.FullStoreClosureList &&
this.storeClosureAcessSettings?.FullStoreClosureList !== 'None')
) {
this.getData();
}
if (
!!this.storeClosureAcessSettings?.AggregatesCounts &&
this.storeClosureAcessSettings?.AggregatesCounts !== 'None'
) {
// this.getAggregate();
}
}