Question

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

我按照mat-table文档添加了一个paginator，尝试让他们的示例使用我现有的工作mat表。

在component.html中，我有一个工作mat表和一个paginator：

<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：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 ：对象{pageIndex：Getter＆amp; Setter，长度：Getter＆amp; Setter，pageSize：Getter＆amp;塞特，......}

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

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

Answer 1

在查看init之后初始化paginator。

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

角度材料2分页器与mat-table初始化

1 个答案: