I am having an issue with a dynamic mat table that includes sorting functionality.
dataSource: MatTableDataSource<MemberList>;
@Output() walkthroughData: EventEmitter<number> = new EventEmitter();
@ViewChild(MatSort, { static: true }) sort: MatSort;
data: any;
memberList: MemberList[];
membersCount: number;
ngOnInit(): void {
setTimeout(() => {
this.dataSource.sort = this.sort;
});
this.teamService.getTeamMembers().subscribe((response) => {
this.data = response['data']['result'];
this.memberList = this.data.map(({ name, role, email }) => ({
teamMember: Object.values(name).join(' '),
email,
role: role?.name,
assignedOn: [
'LA Care Health Plan',
'LA Care Health Plan',
'LA Care Health Plan',
],
}));
this.dataSource = new MatTableDataSource(this.memberList);
});
}
The problem I am facing is that it only works once and then throws an error.
core.js:6210 ERROR TypeError: Cannot set property 'sort' of undefined
I have checked that matHeaderCellDef and matCellDef are the same, I have imported the mat sort module, and I have also tried using ngAfterViewInit for the datasource, but the same error persists. What could I be doing wrong?