时间戳

首页 > 解决方案 > 使用 ngIf 时 mat-paginator 不显示数据

angular - 使用 ngIf 时 mat-paginator 不显示数据

问题描述

我的 HTML 中有以下代码。

<div *ngIf="schemaStatus" class="new-popups">
    <ng-container>
        My grid code
    </ng-container>
    <div class="mdl-grid pull-right">
        <mat-paginator id="paginator{{pageSize}}" (page)="setPagination()" [pageSizeOptions]="pagination.pageSizeOptions" [pageSize]="pageSize"></mat-paginator>
    </div>
</div>

在角度 ts 文件中，我编写了以下代码

@ViewChild(MatPaginator) paginator: MatPaginator;

如果我将schemaStatus变量值从trueto更改为false，则我的分页显示 0 值。falsetrue

  1. 在我从 更改schemaStatus为true之前false。

在将 schemaStatus true 更改为 false 之前

  1. 在我schemaStatus从truetofalse和 back to改变之后true。

在此处输入图像描述

如何让分页器显示数据？

标签： angularangular-material

解决方案

我有同样的错误。我通过将 @ViewChild 更改为 setter 来解决它。这意味着每当您的分页器将被新初始化时，数据源都会获得新的分页器。将静态属性设置为 false 很重要，因为它并不总是存在。

@ViewChild(MatPaginator, {static: false}) set paginator(value: MatPaginator) {
    if(this.dataSource) {
      this.dataSource.paginator = value;
    }
}

推荐阅读