mat-paginator length属性在从服务器调用下一页时发生更改

Question

Im使用带垫表的垫分页器。每次发生(页面(事件时，都会从服务器加载新数据。

传呼机：

<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;
});
}

在第一页上，总长度被正确地省略。当我点击下一页并从服务器加载新数据时，length属性显示错误。

示例：

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

我希望新的与dataSource连接，因为我不想在导航到上一页时从服务器调用数据

this.dataSource.paginator = this.paginator.

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

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}`;
};