角形材料2分页器，带垫台初始化

Question

我正在尝试使角形材质2分页器组件与表格组件一起工作（mat-table指令）。

我按照垫子表格文档添加了分页器，试图使它们的示例与我现有的工作垫子表格一起使用。

在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 _初始化：true _intl：对象{itemsPerPageLabel：“每个项目项page：“，nextPageLabel：”下一页“，previousPageLabel：”上一页“，…} _intlChanges：对象{已关闭：false，syncErrorThrown：false，syncErrorThrowable：false，…} _length：0 _pageIndex：0 _pageSize： 10个_pageSizeOptions：阵列（3）[5，10，20] _showFirstLastButtons：真实页：对象{_isScalar：假的，闭合：假，isStopped：假，...} 原 ：对象{的PageIndex：消气＆设置器，长度：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);
          });
      });
  }