带垫表初始化的角度材料 2 分页器

Question

我正在尝试使 angular material 2 paginator 组件与 table 组件（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: Object { _view: {…}, _viewContainerRef: null, _appRef: null } ? _displayedPageSizeOptions: Array(3) [ 5, 10, 20 ] ? _hidePageSize: 假？_初始化：真的？_intl: Object { itemsPerPageLabel: "Items per page:", nextPageLabel: "Next page", previousPageLabel: "Previous page", ... } ? _intlChanges: Object { closed: false, syncErrorThrown: false, syncErrorThrowable: false, ... } ? _长度：0？_pageIndex: 0 ? _pageSize: 10 ? _pageSizeOptions: Array(3) [ 5, 10, 20 ] ? _showFirstLastButtons: 真？页面：对象{_isScalar：假，关闭：假，isStopped：假，...}？ proto : Object { pageIndex: Getter & Setter, length: Getter & Setter, pageSize: Getter & Setter, ... }

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

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

Answer 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);
          });
      });
  }