html - 渲染列表时，mat-paginator 的范围设置回其初始值

Question

我正在使用 Angular Material 分页器在后端 API 的帮助下实现分页。当单击下一个按钮时，分页器的范围会更新，但一旦呈现列表，范围就会再次显示 1-10。这是我的代码:

getNext(event: PageEvent) {
        this.applicationService.getNextApplications(event).subscribe((applications: PaginationModel) => {
            this.dataSource.data = applications.data;
            this.dataSource.data = this.dataSource.data.sort((a, b) => a.appName.localeCompare(b.appName));
            setTimeout(() => {
                this.dataSource.paginator.length = applications.totalCount;
                this.limit = event.pageSize;
            });
            this.isDataReceivedByServer = true;
        });
    }

上述方法调用api并获取分页值

ngAfterViewInit() {
        this.dataSource.sort = this.sort;
        setTimeout(() => {
            this.dataSource.paginator = this.paginator;
        });
    }

<mat-paginator [length]="totalLength" [pageSize]="limit" [pageSizeOptions]="[10, 25,50, 100]"
    (page)="getNext($event)">
  </mat-paginator>

我不明白为什么分页不能正常工作并且值被设置为其初始值。

Answer 1

dataSource 将分页器的 pageIndex 设置为 0。所以我必须在 setTimeOut 函数中获取当前页面并将其绑定(bind)到 dataSource.paginator 的 pageIndex 属性。
getNext(event: PageEvent) { this.userService.getNextUsers(event).subscribe(users => { this.dataSource.data = users.data; this.dataSource.data = this.dataSource.data.sort((a, b) =>a.firstName.localeCompare(b.firstName)); setTimeout(() => { this.dataSource.paginator.length = users.totalCount; this.dataSource.paginator.pageIndex = users.currentPage - 1; this.limit = event.pageSize; }); this.isDataReceivedByServer = true; }); }