Question

请注意，分页/排序无法正常工作。分页不显示它显示的元素数量，排序不起作用，但如果删除html文件中的行 * ngIf =＆＃34; dataSource？.filteredData.length＆gt; 0＆＃34; 错误已修复。如果您使用过滤，它可以工作，但它不会显示过滤器数量

检查示例。

https://stackblitz.com/edit/angular-wqkekh-nm3pn2?file=app/table-pagination-example.html

Answer 1

在您的component.ts中，替换此代码

@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>

Answer 2

这可以通过以下策略解决：

dataSource = new MatTableDataSource();

@ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
  this.dataSource.sort = sort;
}

现在，即使您使用* ngIf，它也可以工作。

Answer 3

只需添加static：false而不是true，就可以了 @ViewChild（MatSort，{static：false}）e}）public sortaddEpisode：MatSort;

Answer 4

在使用* ngIf隐藏mat-paginator时遇到了问题，因此我使用以下解决方法对其进行了修复。在global.scss中定义以下样式，并在mat-paginator中有条件地应用此样式

.hide-paginator {
  display: none !important;
}

<mat-paginator 
[length]="totalElements"
      [pageSize]="searchDefinition.size" [pageSizeOptions]="paginationOptions" 
      [ngClass]="{'hide-paginator': data.length <= 0 }">
</mat-paginator>

Answer 5

在您的html代码中添加<tr>标记并添加mat-sort-header="fieldname"即可解决。

在mat-table parent中使用ngif时，mat-filtering / mat-sort无法正常工作

5 个答案: