Angular HttpClient 数据源分页器不起作用答案

【问题标题】：Angular HttpClient datasource paginator does not workAngular HttpClient 数据源分页器不起作用
【发布时间】：2019-03-17 19:13:12
【问题描述】：

我有以下实现（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>

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

【问题讨论】：

标签： pagination angular-material

【解决方案1】：

原来数据源加载必须从

开始

           ngAfterViewInit() {
           }

...根据here 的建议，实际的分页器分配必须包含在 SetTimeout() 函数中：

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

【讨论】：