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

Question

我的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>

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

@ViewChild(MatPaginator) paginator: MatPaginator;

如果我将schemaStatus变量值从true更改为false，然后将false更改为true，则分页显示0个值。

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

1. 在将schemaStatus从true更改为false并返回到true之后。

如何使分页器显示数据？

Answer 1

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

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

Answer 2

之所以会这样，是因为一旦schemaStatus设置为false，ViewChild就失去了对paginator的引用，因为ngIf删除了{{1 }}。我们将需要再次在组件中设置分页器。您可以在paginator中使用设置器来设置分页器，但这将在每个更改检测周期中运行。因此，将ViewChild设置回schemaStatus后，您可以使用ChangeDetectorRef强制进行更改检测。

true

这里是工作中的example。