Issue
In a related question I was told that if I wanted to sort an angular material table that was populated from an http.get()
request, I would have to set the sort after the response returned (e.g. in the subscribe()
). This makes sense to me.
However, after playing around with it a bit, I tried to modify my original Stackblitz to set the sort for the angular material table that was populated from inline static json in the same way, in the subscribe()
. This broke the sort for this table.
Stackblitz: https://stackblitz.com/edit/angular-ivy-pvmzbs
Before:
ngOnInit(): void {
if (this.name === 'Inline') {
this.api.getDataInline().subscribe((response) => {
this.dataSource = new MatTableDataSource(response);
});
} else if (this.name === 'Http') {
this.api.getDataHttp().subscribe((response) => {
this.dataSource = new MatTableDataSource(response);
this.dataSource.sort = this.sort;
});
}
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
After:
ngOnInit(): void {
if (this.name === 'Inline') {
this.api.getDataInline().subscribe((response) => {
this.dataSource = new MatTableDataSource(response);
this.dataSource.sort = this.sort;
});
} else if (this.name === 'Http') {
this.api.getDataHttp().subscribe((response) => {
this.dataSource = new MatTableDataSource(response);
this.dataSource.sort = this.sort;
});
}
}
ngAfterViewInit() {}
Why does this break the sort for the inline table?
Solution
As mentioned in other answer, the static data arrives before the view has been rendered, thus it is undefined. You can provide { static: true }
in ViewChild
. You need to set that for being able to run your code in OnInit
.
@ViewChild(MatSort, { static: true }) sort!: MatSort;
Your forked STACKBLITZ
Answered By - AT82
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.