在 mat-table 父级中使用 ngif 时,mat-filtering/mat-sort 无法正常工作 [英] mat-filtering/mat-sort not work correctly when use ngif in mat-table parent
本文介绍了在 mat-table 父级中使用 ngif 时,mat-filtering/mat-sort 无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请注意,分页/排序无法正常工作.分页不显示它显示的元素数量并且排序不起作用,但是如果您删除 html 文件中的行 *ngIf="dataSource?.filteredData.length > 0" 错误是固定的.如果你使用过滤,它可以工作,但它不显示过滤量
Note that paging/sort not work correctly. Paging does not show the number of elements it is showing and sorting does not work, but if you delete the line in the html file *ngIf="dataSource?.filteredData.length > 0" the error is fixed. If you use filtering, it works, but it does not show the filter amount
检查示例.
https://stackblitz.com/编辑/angular-wqkekh-nm3pn2?file=app/table-pagination-example.html
推荐答案
在你的 component.ts 中,替换这段代码
In your component.ts, replace this code
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
用这个:
private paginator: MatPaginator;
private sort: MatSort;
@ViewChild(MatSort) set matSort(ms: MatSort) {
this.sort = ms;
this.setDataSourceAttributes();
}
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.setDataSourceAttributes();
}
setDataSourceAttributes() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
在你的 html 中:
And in your html:
<mat-card *ngIf="!dataSource?.filteredData.length" style="margin-bottom: 5px">
<div><span>ZERO RESULT</span></div>
</mat-card>
<mat-card *ngIf="dataSource?.filteredData.length">
** insert the table code that you have **
</mat-card>
这篇关于在 mat-table 父级中使用 ngif 时,mat-filtering/mat-sort 无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文