angular - MatPaginator 和 MatTableDataSource - 更改总大小

Question

我将 MatPaginator 与 MatTableDataSource 一起使用，当我将数据分配给 dataSource 时，它​​会更改我分配给 MatPaginator 的长度。因此，当我加载下一页、排序或过滤时，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>

负载：

下一页之后：

Answer 1

您必须删除此行

 this.dataSource.paginator = this.paginator;

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