异步初始化MatPaginator [英] Initialising MatPaginator asynchronously

问题描述

我们像

<div *ngIf="someDataObs | async as yourData else loading">
   <mat-table #table [dataSource]="yourData">
      ... your headers and columns
   </mat-table>
   <mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>

那样在components中初始化MatPaginator.

@ViewChild(MatPaginator) paginator: MatPaginator;

并分配给组件中定义为

的MatTable DataSource

matTableDataSource.paginator = this.paginator;

在用async管道和*ngIf组合异步初始化数据源时，在用例中这不起作用.

<div *ngIf="someDataObs | async as yourData else loading">
   <mat-table #table [dataSource]="yourData">
      ... your headers and columns
   </mat-table>
   <mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>

注意:您可以使用*ngIf将mat-paginator放在div下方，但这不是理想的解决方案，如果需要在同一组件中显示多个表，则不是一个理想的解决方案一个后端异步调用.

由于mat-paginator将被异步初始化，因此使用下面的代码将不起作用，因为paginator将是null.

ngAfterViewInit() {
  this.someDataObs = this.backendService.get()
    .map(value => {
      const matTableDataSource = new MatTableDataSource<SomeType>(value);
      matTableDataSource.paginator = this.paginator; // will be null here
      return matTableDataSource;
    });
}

要想有一个可行的方法，就需要MatPaginator在初始化后让output property发出，但目前尚不存在.

使用async管道和*ngIf使代码非常简洁，您不应避免使用它来克服此用例.

任何实现此目的的解决方案都是有帮助的.

解决方案

GitHub :

只需将此HIDDEN添加到表格之前 当HIDDEN == TRUE时，将不会在加载数据源之前呈现该表:

<div [hidden]="isLoading">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>

We initialise MatPaginator in our components like

@ViewChild(MatPaginator) paginator: MatPaginator;

and assign to a MatTable DataSource defined in our component as

matTableDataSource.paginator = this.paginator;

This doesn't work in a use case when the data source is initialised asynchronously using async pipe with a combination of *ngIf. As,

<div *ngIf="someDataObs | async as yourData else loading">
   <mat-table #table [dataSource]="yourData">
      ... your headers and columns
   </mat-table>
   <mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>

Note: you could put mat-paginator below the div with *ngIf, but that's not an ideal solution, more so if you need to show multiple tables in a same component coming with a single backend asynchronous call.

Since the mat-paginator will get initialised asynchronously, using a code such as below will not work as paginator will be null.

ngAfterViewInit() {
  this.someDataObs = this.backendService.get()
    .map(value => {
      const matTableDataSource = new MatTableDataSource<SomeType>(value);
      matTableDataSource.paginator = this.paginator; // will be null here
      return matTableDataSource;
    });
}

To have a way for this to work would've required MatPaginator to have an output property to emit once initialised, but that doesn't exist for now.

Use of async pipe and *ngIf makes the code really concise and you should not avoid it to overcome this use case.

Any solution to achieve this would be helpful.

解决方案

There is another solution on GitHub:

Just add this HIDDEN before the table While HIDDEN==TRUE the table will not be rendered before the dataSource is loaded:

<div [hidden]="isLoading">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>

这篇关于异步初始化MatPaginator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！