javascript - Angular 形 Material 2分页器，带垫台初始化

我正在尝试使角材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;

问题是分页器不执行任何操作，并且下一个和上一个按钮显示为灰色。



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

我的BasicDataSource扩展了DataSource，使用ngAfterViewInit无效，因为这时未定义this.datasource(api调用未完成)。

最佳答案

View 初始化后初始化分页器。

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