angular - 从服务器调用下一页时，mat-paginator 长度属性发生变化

Question

我将 mat-paginator 与 mat-table 一起使用。每次 on (page) 事件时都会从服务器加载新数据。

分页器：

 <mat-paginator [length]="totalCount" (page)="pageChange($event)" [pageSizeOptions]="['10', '20']" showFirstLastButtons [ngClass]="{'hidden-table':dataSource?.data.length<11}" class="mat-paginator table-paginaton">
  </mat-paginator>


  pageChange(event) {
    if (this.dataSource.data.length < this.totalCount && this.nextPageUrl) {
      this.nextPage();
    }
  }

  nextPage() {
    this.showProgressBar = true;
    this.http.get(this.nextPageUrl).subscribe((data: any) => {
      this.showProgressBar = false;
      this.nextPageUrl = data.next;
      this.dataSource.data = this.dataSource.data.concat(data.results);
      this.totalCount = data.count;
      this.dataSource.paginator.length = this.totalCount;
    });
  }

在 firstPage 上，总长度正确显示。当我单击下一页并从服务器加载新数据时，长度属性显示不正确。

例子：

我有 23 行，我的 pageSize 选项设置为 10。最初它显示 "1-10 of 23" 。当我导航到下一页时，它显示“11-20 of 22”。这里 22 不正确，因为总长度为 23。导航到第 3 页后，它再次正确显示为 23。

我希望将 new 与 dataSource 连接起来，因为我不想在导航到上一页时从服务器调用数据。我找到了诸如 remove 之类的答案

 this.dataSource.paginator = this.paginator.

但是找不到满意的答案。还有其他方法可以正确显示长度吗？

标签： angularangular-materialmat-table

Answer 1

这解决了我的问题：

 this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number) => {
      const start = page * pageSize + 1;
      const end = (page + 1) * pageSize > this.totalCount? this.totalCount: (page + 1) * pageSize;
      return `${start} - ${end} of ${this.totalLength}`;
    };