如何使用 angular 动态更改 css 类

Question

我正在使用带有表单的 bootstrap4 navs 我试图将 css 类更改为显示：none; 对于每个未选中的选项卡，我试图通过使用 ngClass 来实现这一点，但没有成功 stackblitz 演示

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="itemSummary-tab" data-toggle="tab" href="#itemSummary" role="tab" aria-controls="itemSummary" aria-selected="true">Item Summary</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="measurement-tab" data-toggle="tab" href="#measurement" role="tab" aria-controls="measurement" aria-selected="false">Measurement</a>
    </li>
  </ul>

     <div class="tab-pane fade show active" ngClass="!active? display:none" id="itemSummary" role="tabpanel" aria-labelledby="itemSummary-tab"> 
    ....
    </div>
  <div class="tab-pane fade" id="measurement" ngClass="!active? display:none" role="tabpanel" aria-labelledby="measurement-tab">
...
</div>
  <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">
...
</div>

Answer 1

试试这个演示代码。

在ts文件中创建了一个方法：

  activateClass(tab) {
    this.selectedTabName = tab;
  }

并在html

    <li *ngFor="let tab of tabs"  (click)="activateClass(tab)" class="nav-item">
      <a class="nav-link" id="{{tab}}-tab" [ngStyle]="{'background-color': (selectedTabName === tab) ? 'red' : 'black' }" data-toggle="tab" href="#{{tab}}" role="tab" >{{tab}}</a>
    </li>

替换上面的[ngStyle]代码，用下面的一个来满足你的display:none要求display:none

[ngStyle]="{'display': (selectedTabName === tab) ? '' : 'none' }"

不确定在display:none状态下有人将如何选择另一个选项卡

Answer 2

这是来自文档https://angular.io/api/common/NgClass

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

但由于您只是想设置单一样式 Shashank Vivek 是正确的，您应该尝试https://angular.io/api/common/NgStyle <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

这将使您的示例（您需要方括号！）：

<some-element [ngStyle]="{ 'display: none': !active }">...</some-element>

这设置display: none active === false时display: none active === false

Answer 3

您可以使用 ngClass 指令为元素分配类。

<p
  [ngClass]="{
  'red': classStyle,
  'green': !classStyle}">
  Dynamic classes
</p>

css

.red {
  background-color: red;
}

.green {
  background-color: green;
}

Answer 4

您可以使用条件类参考https://malcoded.com/posts/angular-ngclass/