Css MatPaginator在ngIf内的意外行为？

我有一个材料表，如下所示：

... 排。。。

当变量

info

为false时，我需要隐藏该表

---

尝试1:

当

info

为true且所有行都显示在第一页时，它可以正常工作，但分页不起作用

---

尝试2:

使分页工作正常，但当

info

为false时，仍会显示表格，但不会显示任何结果

---

尝试3:

尝试使用

div

搜索整个表，并将

*ngIf

应用于div。结果：问题与第一次尝试相同

试图将

[hidden]

应用于

div

，但仍未隐藏

---

编辑：尝试4:

直接应用于envolving

div

css

style=“display:none”

并获得与尝试3相同的结果，即使没有值也会显示该表

---

当

info

为false时，您知道如何隐藏该表并显示它吗 当工作分页的

info

为真时

谢谢

您可以使用添加动态类并使用该类隐藏表，如

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

在你的style.css中

.hidden{
display:none;
}

您可以使用添加动态类并使用该类隐藏表，如

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

在你的style.css中

.hidden{
display:none;
}

用这种方法

 [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>

[hidden]=“true”
测试。
{{exp}}

确保以这种方式在[隐藏]中更改您的条件

 [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>

[hidden]=“true”
测试。
{{exp}}

---

确保在[hidden]

中更改您的条件，您不能将分页器放在ngIf中，否则，当您设置

this.dataSource.paginator=this.paginator

时，

this.paginator

未定义。如果您真的想要ngIf，有一个解决方案（告诉我是否确实需要），但我建议将其改为

隐藏
。
您不能将分页器放在ngIf中，否则，当您设置
this.dataSource.paginator=this.paginator
，则
this.paginator
未定义。如果您真的想使用ngIf，有一个解决方案（告诉我是否确实需要），但我建议将其改为
hidden
。
Angular 8解决方案：

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


.tableClass.mat-tab-group.mat-primary.mat墨水条{
宽度：160px！重要；
}

Angular 8解决方案：

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


.tableClass.mat-tab-group.mat-primary.mat墨水条{
宽度：160px！重要；
}

谢谢，但您的解决方案仅适用于普通表格，而不是带有分页的角度材质表格，其中存在
*ngIf
错误。更新为stackblitz@Iñigo您使用了错误的条件如果您想隐藏，如果没有项目，那么应该是
*ngIf=“info？.length”
，这并不能解决我的问题。ngIf条件在这里并不重要。如果设置*ngIf=“true”，则分页器不工作。请参阅StackBlitzThank，但您的解决方案仅适用于普通表格，而不是带有分页的角度材质表格，其中存在
*ngIf
错误。更新为stackblitz@Iñigo您使用了错误的条件如果您想隐藏，如果没有项目，那么应该是
*ngIf=“info？.length”
，这并不能解决我的问题。ngIf条件在这里并不重要。如果设置*ngIf=“true”，则分页器不工作。参见stackblitz