ngIf 中的 MatPaginator 意外行为？答案

【问题标题】：MatPaginator unexpected behaviour inside ngIf?ngIf 中的 MatPaginator 意外行为？
【发布时间】：2020-03-01 18:40:39
【问题描述】：

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 为假时，我需要隐藏表格。

尝试 1：

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

它工作正常，但当info 为真并且所有行都显示在第一页上时，分页不起作用。

尝试 2：

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

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

尝试 3：

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

尝试将[hidden] 应用于div，但仍然没有隐藏。

编辑：尝试 4：

直接应用于循环的div css style="display:none" 并得到与尝试3相同的结果，即使没有值也显示该表。

关于如何在info 为假时隐藏表格并显示它的任何想法当info 为真时，分页有效？

谢谢！

【问题讨论】：

标签： css angular typescript pagination angular-material

【解决方案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] 中更改您的条件

【讨论】：

【解决方案2】：

您可以使用ngClass 添加动态类并使用该类来隐藏表格

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

在你的 style.css 中

.hidden{
display:none;
}

demo

【讨论】：

谢谢，但您的解决方案仅适用于普通表格，而不适用于带有分页的 Angular-Material 表格，*ngIf 错误所在。
用 stackblitz 更新
@Iñigo 你使用了错误的条件如果你想隐藏如果没有项目那么它应该是*ngIf="info?.length"stackblitz.com/edit/angular-p3mehr
这并不能解决我的问题。 ngIf 条件在这里并不重要。如果我设置 *ngIf="true" 分页器不工作。见 stackblitz

【解决方案3】：

您不能将分页器放在 ngIf 中，否则，当您设置 this.dataSource.paginator = this.paginator 时，this.paginator 是未定义的。如果你真的想 ngIf 有一个解决方案（告诉我是否真的有必要），但我建议改为 hidden。

【讨论】：

【解决方案4】：

Angular 8 解决方案：

[hidden] 可以用来代替 *ngIf 并且可以使用 CSS 属性来激活选项卡。

 .tableClass .mat-tab-group.mat-primary .mat-ink-bar {
          width: 160px !important;
        }

<div [hidden]="true" class="tableClass">
     <mat-tab-group>
        <mat-tab label="Tab1">
        </mat-tab>
        <mat-tab label="Tab2">
        </mat-tab>
     </mat-tab-group>
</div>

【讨论】：