Angular 物料分页在*ngIf内时不起作用

我有一段内部带有分页的代码，但是分页不起作用。它总是显示所有元素。但是从container 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>

...

根据GitHub问题，分页器在一个

ngIf

中中断，但您可以尝试使用此代码片段来解决问题：

或者，发布的另一个解决方案是使用

hidden

属性，而不是

ngIf

...

根据GitHub问题，paginator在一个

ngIf

中中断，但您可以尝试使用此代码段来解决此问题：

或者，发布的另一个解决方案是使用

hidden

属性，而不是

ngIf

...

---

请提供stackblitz（在获取assing paginator值后使用setTimeout）请提供stackblitz（在获取assing paginator值后使用setTimeout）

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

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

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