Question

我正在使用有角材质分页器在后端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

您必须显式更新MatPaginator.pageIndex。不确定示例中的this.dataSource是由什么组成的。也许您可以使用this.dataSource.paginator.pageIndex，否则尝试首先使用MatPaginator获得对@ViewChild的引用。

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

getNext(event: PageEvent) {
    ...
    this.paginator.pageIndex += 1;
    ...        
}

Answer 2

dataSource将分页器的pageIndex设置为0。因此，我必须在setTimeOut函数中像这样获取当前页面并将其绑定到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; }); }

呈现列表时，mat-paginator的范围设置回其初始值

2 个答案: