mat-paginator 不适用于 [隐藏]

Question

最近在使用 "mat-table" 时，不得不使用 "mat-paginator" 并发现 [hidden] 属性对其没有任何影响。 然后我最终使用了

<mat-paginator [ngStyle]="{display: nodes.length >0 ? 'block' : 'none'}" [pageSize]="50" [pageSizeOptions]="[5, 25, 50, 100]">

相反，*ngIf 正在工作，但是.. 它给我带来了动态数据和可观察的麻烦。

请问有什么正确的方法吗？？

Answer 1

[hidden] 属性使元素的可见性不可见，但将 DOM 元素添加到 HTML 并以某种方式显示属性：none 被其他父 CSS 规则覆盖。

在 *ngIf 的情况下，该元素不在 DOM 中创建。所以其他 CSS 规则不适用。

*ngIf 方法是完美的。

Answer 2

以下内容刚刚对我有用：

1. 添加一个新元素（例如 div）作为 mat-paginator 的父级
2. 给父div元素添加[hidden]属性和条件

例如：

<div [hidden]="nodes.length <= 0">
  <mat-paginator [pageSize]="50" [pageSizeOptions]="[5, 25, 50, 100]"></mat-paginator>
</div>

这似乎也适用于动态数据。