Angular ngx-bootstrap 隐藏选项卡内容

Question

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

这是选项卡：

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

None 个更改选项卡或其内容。

是否存在其他方法？有没有人在动态更改 ngx-bootstrap 选项卡方面取得成功？我应该尝试不同的平板电脑吗？

谢谢！

Answer 1

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

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

连同 CSS class:

.countHidden { display: none !important; }

我还需要将 CSS class 放在 styles.css 中，而不是单个组件的 CSS全部，选项卡样式。

Answer 2

特定索引

.nav-tabs > li:nth-child(tabIndex){
  display: none;
}

对于组件中的所有选项卡

.nav-tabs > li{
display:none
}

在 style.css

中指定它们

Angular ngx-bootstrap hide tab content