时间戳

首页 > 解决方案 > Angular HttpClient 数据源分页器不起作用

pagination - Angular HttpClient 数据源分页器不起作用

问题描述

我有以下实现（Angular 6）。

数据被很好地提取并按预期显示在表格中。但是分页器不起作用。

见下文：

@ViewChild(MatPaginator) paginator: MatPaginator;

然后在构造函数中：

    this.dataSource = new MatTableDataSource([]);

    this.requestHttpService.getStuff()
        .subscribe(data => {
            this.results = data;
            this.dataSource = data;
        });

然后

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}

最后在 HTML 中：

<mat-paginator #paginator
               [length]="100"
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

我不确定这段代码有什么问题，但这些分页功能似乎都不起作用。我错过了什么。

标签： paginationangular-material

解决方案

原来数据源加载必须从

           ngAfterViewInit() {
           }

...并且实际的分页器分配必须按照此处的建议包含在 SetTimeout() 函数中：

            setTimeout(() => {
                this.dataSource = new MatTableDataSource(this.results);
                this.dataSource.paginator = this.paginator;
            });

推荐阅读