mat-paginator не отображает данные при использовании ngIf

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>

В угловом файле ts я написал следующий код

@ViewChild(MatPaginator) paginator: MatPaginator;

Если я изменил значение моей переменной schemaStatus сtrue до false и затем false до true, моя нумерация страниц показывает 0 значений.

1. Прежде чем я изменю schemaStatus с true на false.

После того, как я изменил schemaStatus с true на false и обратно на true.

Как сделатьЯ заставляю paginator показывать данные?

Answer 1

Это происходит потому, что как только schemaStatus устанавливается на false, ViewChild теряет свою ссылку на paginator, так как ngIf удаляет paginator из DOM. Нам нужно будет снова установить paginator в компоненте. Вы можете использовать сеттер в ViewChild для настройки вашего пагинатора, но это будет выполняться в каждом цикле обнаружения изменений. Таким образом, вместо этого вы можете форсировать обнаружение изменений, используя ChangeDetectorRef, как только вы установите schemaStatus обратно на true.

import { ChangeDetectorRef } from '@angular/core';
// Add other imports here

    constructor(private cd: ChangeDetectorRef) { }

    // Add this where you set schemaStatus to true
    this.schemaStatus = true;
    this.cd.detectChanges();
    this.dataSource.paginator = this.paginator;    

Вот рабочий пример .

Answer 2

У меня была такая же ошибка. Я решил это, изменив @ViewChild на сеттер. Это означает, что всякий раз, когда ваш paginator будет инициализирован заново, источник данных получает новый paginatior. Важно установить для свойства static значение false, поскольку оно существует не всегда.

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