具有垫表初始化的角度材料2分页器答案

【问题标题】：angular material 2 paginator with mat-table initialization具有垫表初始化的角度材料2分页器
【发布时间】：2018-10-05 22:53:04
【问题描述】：

我正在尝试使 angular material 2 分页器组件与表格组件（mat-table 指令）一起使用。

我按照 mat-table 文档添加了一个分页器，试图让他们的示例与我现有的工作 mat 表一起工作。

在 component.html 中，我有一个工作垫表和一个分页器：

<div class="example-container">
    <mat-table [dataSource]="dataSource">
    // columns and rows
    </mat-table>
    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
</div>

使用这个html的组件实现了ngOnInit：

ngOnInit() {
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }

组件使用@ViewChild获取分页器：

@ViewChild(MatPaginator) paginator: MatPaginator;

问题是分页器什么都不做，下一个和上一个按钮都是灰色的。

console.log(this.paginator) 给出：

_changeDetectorRef: 对象 { _view: {…}, _viewContainerRef: null, _appRef: null } _displayedPageSizeOptions: Array(3) [ 5, 10, 20 ] _hidePageSize: false _initialized: true _intl: Object { itemsPerPageLabel: "每页项目数:", nextPageLabel: "下一页", previousPageLabel: "上一页", ... } _intlChanges: Object { 关闭: false, syncErrorThrown: false, syncErrorThrowable: false, ... } _长度：0 _pageIndex: 0 _pageSize: 10 _pageSizeOptions: Array(3) [ 5, 10, 20 ] _showFirstLastButtons: true page: Object { _isScalar: false, closed: false, isStopped: false, ... } proto: Object { pageIndex: Getter & Setter, length: Getter & Setter, pageSize: Getter & Setter, ... }

我不知道如何调试/了解导致分页器无法工作的原因。

我的 BasicDataSource 扩展了 DataSource 并使用 ngAfterViewInit 不起作用，因为此时 this.datasource 未定义（未完成 api 调用）。

【问题讨论】：

标签： javascript angular typescript angular-material angular5

【解决方案1】：

在视图初始化后初始化分页器。

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

用空白数组初始化数据源。

ngOnInit() {
            this.dataSource = new BasicDataSource([]);
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }

【讨论】：