css - ngIf 中的 MatPaginator 意外行为？

Question

STACKBLITZ DEMO

我有一个 Material 表如下:

<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 为真并且所有行都显示在第一页时，分页不起作用。

---

1. 尝试 2:

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

使分页工作，但是当 info 为 false 时，表格仍然显示但没有结果。

---

1. 尝试 3:

试图用 div 围绕整个表格并将 *ngIf 应用于 div。结果:与第一次尝试时相同的问题。

尝试将 [hidden] 应用于 div 但仍未隐藏。

---

1. 编辑:尝试 4:

直接应用于环绕的 div css style="display:none" 并获得与尝试 3 相同的结果，即使没有显示表格值(value)观。

---

Any idea on how to hide the table when info is false and show it when info is true with a working pagination?

谢谢!

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 demo

确保在 [hidden] 中更改您的条件