MatPaginator MatTableDataSource-更改总大小(&A) [英] MatPaginator & MatTableDataSource - Change Total Size

问题描述

我将MatPaginator与MatTableDataSource一起使用，当我将数据分配给DataSource时，它会更改我分配给MatPaginator的长度。因此，当我加载NextPage、排序或筛选时，dataSorce更改了长度，无法继续分页。

我的代码：

  public dataSource = new MatTableDataSource<Permission>();
  pageSize!: number;
  pageIndex!: number;
  length!: number;

  @ViewChild(MatPaginator)
  paginator!: MatPaginator;

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
}
      
  handlePageEvent(event: PageEvent) {
    this.loading = true;
    this.pageSize = event.pageSize;
    this.pageIndex = event.pageIndex + 1;
    this.loadDatabase();
  }

  datab: Permission[] = [];
  loadDatabase() {
    this.permissionService
      .showAllPermissions(this.filter, this.pageSize, this.pageIndex, this.sortColumn, this.sortOrder)
      .subscribe(
        result => {

          const d = result.data as Permission[];
          d.forEach(r => {
            if (!this.datab.some(x => x.id === r.id)) {
              this.datab.push(r);
            }
          });

          this.dataSource.data = this.datab as Permission[];
          this.length = result.paginatorInfo.total;

          this.loading = false;
        });
  }
}

HTML

<table mat-table [dataSource]="dataSource" class="center" matSort (matSortChange)="sortData($event)">



<mat-paginator (page)="handlePageEvent($event)" [pageSize]=pageSize [length]="length" [pageIndex]="pageIndex-1">
</mat-paginator>

加载时：

下一页后：

推荐答案

您必须删除此行

 this.dataSource.paginator = this.paginator;

因为它将总计行设置为当前页

这篇关于MatPaginator MatTableDataSource-更改总大小(&A)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！