时间戳

首页 > 解决方案 > 过滤后角度材料表分页器未更新

angular - 过滤后角度材料表分页器未更新

问题描述

我正在使用多选选择框值过滤表数据源。当我从选择框中选择选项时，表记录正在更新。但是分页器没有更新。

 @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.filterPredicate = (tdata: Catalog, filter: string) => {
        return this.filters.length > 0 ?
            this.filters.some(e => e === tdata.type) :
            true;
    };

}

applyFilter() {
    this.tdataSource.filter = 'trigger filter';
}
<mat-form-field>
   <mat-label>Filters</mat-label>
   <mat-select multiple [(value)]="filters">
   <mat-option  *ngFor="let item of options" [value]="item" (click)="applyFilter(item)">
   {{item}}
   </mat-option>
   </mat-select>
</mat-form-field>

在下图中，我只过滤数据库。表正在根据过滤器进行更新。但是分页器正在显示所有记录。

而且，如果我选择表头中的所有复选框，它会选择所有记录，而不是选择 UI 中显示的 4 条记录。 在此处输入图像描述

标签： angularangular-material

解决方案

您是否尝试在过滤器方法中再次初始化分页器：

applyFilter(filterValue: string) {
  this.dataSource.filter = filterValue.trim().toLowerCase();
  setTimeout(() => this.dataSource.paginator=this.paginator;
  setTimeout(() => this.dataSource.sort = this.sort);
}

推荐阅读