Question

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

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

垫子表似乎正确填充了数据，并且分页器正确显示在其下方，但是它们无法连接在一起：

如您所见，分页器设置为每页5条记录，但是表中当前页上的记录多于该记录。它还说0中的0，这进一步表明链接到表失败。

这是我的html：

    <mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”>
…
     </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

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

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

Answer 2

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

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

Answer 3

我知道了。

将表和分页器一起放在divIf语句中的divIf语句中

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

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

因此，我首先要做的是初始化MatTableDataSource并将分页器分配给ngAfterViewInit（）。在loadEndpoints（）中，我改为将endpointList分配给了一个变量：

this.endpointList = endpointList

第二，如果isLoading为true或列表的大小为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 4

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

PS：我知道这个问题很旧，已经提供了解决方案。我遇到了同样的问题，它对我有用。使用隐藏解决了我的问题。留给以后的访客。 credit

将分页器链接到MatTable时出现问题

4 个答案: