如何使用 Angular 动态更改 css 类

Question

我正在使用 bootstrap4 navs 和一个表单，我试图将 css 类更改为显示：none; 对于每个未选择的选项卡，我尝试使用 ngClass 来实现此目的，但没有起作用 stackblitz demo

  <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

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

不确定当另一个选项卡处于display:none状态时，人们将如何选择它