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

Posted 2023-03-13

【中文标题】具有垫表初始化的角度材料2分页器

【英文标题】：angular material 2 paginator with mat-table initialization

【发布时间】：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 调用）。

【参考方案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);
          );
      );