在 *ngIf 内部时，材料分页不起作用答案

【问题标题】：Material pagination does not work when inside *ngIf在 *ngIf 内部时，材料分页不起作用
【发布时间】：2020-09-26 19:47:38
【问题描述】：

我有这段代码，里面有分页，但分页不起作用。它始终显示所有元素。但是从容器 div 中删除 *ngIf，它就可以了。为什么会这样？如何使它与 *ngIf 一起工作？我真的需要使用它。

<div *ngIf="savingTransactionsDataSource" class="mat-elevation-z8">

    <table mat-table [dataSource]="savingTransactionsDataSource">
        <ng-container [matColumnDef]="column" *ngFor="let column of items">
          ...
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="savingColumnsToDisplay; sticky: true;"></tr>
        <tr mat-row *matRowDef="let row; columns: savingColumnsToDisplay;"></tr>
    </table>

    <mat-toolbar class="mat-toolbar-sticky">
        <mat-toolbar-row>

            <span class="spacer"></span>

            <mat-paginator [length]="savingTransactionsDataSource.data.length"
                           [pageSize]="5"
                           [pageSizeOptions]="[5, 10, 15, 20]"
                           showFirstLastButtons>
            </mat-paginator>

        </mat-toolbar-row>
    </mat-toolbar>
</div>

【问题讨论】：

请提供stackblitz
stackoverflow.com/questions/64010053/…（在获取值后使用 setTimeout 来分配分页器）

标签： angular pagination angular-material

【解决方案1】：

根据this GitHub 问题，分页器在ngIf 内中断，但您可以尝试使用这个sn-p 来解决这个问题：

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

另外，发布的另一个解决方案是使用hidden 属性而不是ngIf。

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

【讨论】：