javascript - 具有垫表初始化的 Angular Material 2分页器

Question

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

---

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

The console.log(this.paginator) gives :

_changeDetectorRef: Object { _view: {…}, _viewContainerRef: null, _appRef: null } ​ _displayedPageSizeOptions: Array(3) [ 5, 10, 20 ] ​ _hidePageSize: false ​ _initialized: true ​ _intl: Object { itemsPerPageLabel: "Items per page:", nextPageLabel: "Next page", previousPageLabel: "Previous page", … } ​ _intlChanges: Object { closed: false, syncErrorThrown: false, syncErrorThrowable: false, … } ​ _length: 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 调用未完成)。

Answer 1

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