MatPaginator неожиданное поведение внутри ngIf?

Question

STACKBLITZ DEMO

У меня есть следующая таблица материалов:

<table mat-table [dataSource]="dataSource" >
    ... Rows ...
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>  
<mat-paginator #MatPaginator [pageSizeOptions]="[4]" showFirstLastButtons></mat-paginator>

Мне нужно, чтобы таблица была скрыта, когда переменная info имеет значение false.

---

1. Попытка 1:

<table *ngIf="info" mat-table [dataSource]="dataSource" >

Работает нормально, но разбиение на страницы не работает, если info верно и всестроки отображаются на первой странице.

---

Попытка 2:

<table [hidden]="!info" mat-table [dataSource]="dataSource" >

Делает работу разбивки на страницы, но когда info ложно, таблица все равно отображается без результатов.

---

Попытка 3:

Попытка обвести весь стол с помощью div и применить *ngIf к делению. Результат: та же проблема, что и в первой попытке.

Пытался применить [hidden] к div, но все еще не скрывается.

---

РЕДАКТИРОВАТЬ: Попытка 4:

Применительно непосредственно к envolving div css style="display:none" и получить тот же результат, что и при попытке 3, таблица отображается дажеесли он не имеет значений.

---

Есть идеи о том, как скрыть таблицу, когда info ложно, и показать, когда info верно с рабочей пагинацией?

Спасибо!

Answer 1

Используйте этот способ

 [hidden]="true"

<div [hidden]="true" >
  <table mat-table [dataSource]="dataSource" >
      <ng-container matColumnDef="test">
        <th mat-header-cell *matHeaderCellDef> Test. </th>
          <td mat-cell *matCellDef="let exp"> {{exp}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>  
  <mat-paginator #MatPaginator [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons> 
  </mat-paginator>
<div>

демонстрация stackblitz

убедитесь, что вы изменили свое состояние в [скрыто]

Answer 2

Вы не можете поместить paginator в ngIf, в противном случае, когда вы установите this.dataSource.paginator = this.paginator, this.paginator не определено. Есть решение, если вы ДЕЙСТВИТЕЛЬНО хотите это сделать (скажите, действительно ли это необходимо), но я рекомендую вместо этого изменить значение на hidden.

Answer 3

вы можете использовать ngClass , чтобы добавить динамический класс, и использовать этот класс, чтобы скрыть таблицу, например

[ngClass]="{'hidden': !info}"

и в вашем style.css

.hidden{
display:none;
}

демо