在mat-table父级中使用ngif时，mat-filtering/mat-sort无法正常工作 [英] mat-filtering/mat-sort not work correctly when use ngif in mat-table parent

问题描述

请注意，分页/排序无法正常工作.分页不显示其显示的元素数，并且排序不起作用，但是如果您删除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中:

    <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屋！