css - Angular ngx-bootstrap 隐藏选项卡内容

Question

我在 Angular 8 页面上有 3 个选项卡，我试图让其中一个选项卡不再显示或至少在变量等于 0 时停止显示其内容。到目前为止我已经尝试了一些方法。

这是选项卡:

<tab heading="{{counter}}" id="counter" [hidden]="counter == 0"></tab>

我在 styles.css 和组件 css 中尝试过使用或不使用以下行，就像我在网上找到的页面建议的那样:

[hidden] { display: none !important; }

这是组件 ts 文件中的变量:

counter: number;

该变量由来自 API 调用的数组设置，这一切似乎都工作正常:

this.counter = this.messagesArray.length;

选项卡标签上的插值有效并显示“0”，当登录到控制台时，计数也显示“0”，但选项卡中的条件不会隐藏或更改内容。

我也尝试过 ngClass:

<tab heading="{{counter}}" id="counter" [ngClass]="{'counterHide' : counter == 0}"></tab>

这些都不会更改选项卡或其内容。

是否存在其他方法？有人在动态更改 ngx-bootstrap 选项卡方面取得过成功吗？我应该尝试不同的标签集吗？

谢谢!

Answer 1

我遇到了另一种似乎有效的方法。它使选项卡消失并且不影响选项卡排序:

<tab heading="{{counter}}" id="counter" customClass=countHidden{{ count !=0 ? '_HIDDEN' : '' }}></tab>

与 CSS 类一起:

.countHidden { display: none !important; }

我还需要将 CSS 类放入 styles.css，而不是单个组件的 CSS，对于大多数(如果不是全部)选项卡样式，我都必须这样做。