禁用primeng p-table中分页器中的next按钮

Question

如果布尔值为false，我想从p-table的分页器中禁用next按钮。

这是我的桌子：

<p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
         [paginator]="paginator" [pageLinks]="1" ...

为了禁用按钮，您可以看到我的css代码：

::ng-deep 
     .ui-paginator-next {
        visibility: hidden;
    }

如何仅在我的布尔值为真的情况下启用css代码，我希望在p-table标记中使用ngClass，但它不会影响分页器。

Answer 1

向表中添加一个类，就像您说的那样，使用ngClass或如下所示：

[class.hide-next]="hideNext"

在CSS规则集中，将该类添加到选择器中，如下所示：

:host ::ng-deep {
    .hide-next .ui-paginator-next {
        visibility: hidden;
    }
}

​

您可以看到一个演示这里。我使用了primeNG演示，并添加了上面所写的内容，并为分页器的next按钮添加了一个切换按钮。

注意：类名与您所写的略有不同。我想是因为版本的差异。