angular - 将分页器链接到 MatTable 的问题

Question

我正在尝试在 Angular 6 中向我的 mat-table 添加分页。我正在使用下面链接中的一些示例。但它不起作用：

https://material.angular.io/components/table/examples

看起来 mat-table 正确地填充了数据，并且分页器正确地出现在它的下方，但是它们无法连接在一起：

可以看到，分页器设置为每页5条记录，但是表中当前页的记录多于记录。它还表示 0 out of 0，这进一步表明无法链接到表。

这是我的html：

    <mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”&gt;
…
     </mat-table>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

这是我的 ts 代码：

export class DynamicDataListComponent implements OnInit {
…
  dataSource : MatTableDataSource<any>;
…
  @ViewChild(MatPaginator) paginator : MatPaginator;
…
  ngOnInit() {
…
    this.loadEndpoints();
  }

  async loadEndpoints() {
…
      const endpointListObs = await this._dataStorageService.getAPIEndpointList();
      endpointListObs.subscribe((endpointList: any[]) => {
        this.dataSource = new MatTableDataSource<any>(endpointList);
        this.dataSource.paginator = this.paginator;
…
      });
…
  }
…
}

谁能告诉我做错了什么？

谢谢。

Answer 1

我想到了。

原来表格和分页器都在一个带有 ngIf 语句的 div 中：

<div *ngIf="!isLoading">
...
</div>

这意味着在数据加载到表中之前不会呈现分页器。

所以我所做的是，首先，将 MatTableDataSource 的初始化和分页器的分配放入 ngAfterViewInit() 中。在 loadEndpoints() 中，我将 endpointList 分配给了一个变量：

this.endpointList = endpointList

其次，如果 isLoading 为真或列表大小为 0，我在 ngAfterViewInit() 中设置超时。否则，我使用 endpointList 变量初始化 MatTableDataSource 并为其分配分页器：

ngAfterViewInit() {
    if (this.isLoading || this.listSize === 0) {
      setTimeout(() => {
        this.ngAfterViewInit();
      }, 1000);
    } else {
      this.dataSource = new MatTableDataSource<any>(this.endpointList);
      this.dataSource.paginator = this.paginator;
    }
}

它有效！

Answer 2

您在模板上缺少对分页器的引用。更改您的模板以包括#paginator：

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

Answer 3

<div [hidden]="!isLoading">
...
</div>

PS：我知道问题已经过时并且已经提供了解决方案。我遇到了同样的问题，它对我有用。使用隐藏解决了我的问题。留在这里留给未来的访客。 信用

Answer 4

您是否将数据源分页器设置为您的分页器？

ngOnInit() {
    this.dataSource.paginator = this.paginator; //this sets the paginator to your datasource
 ....
    this.loadEndpoints();
}