javascript - 如何使用 Angular 动态更改css类

Question

我正在使用带有表单的 bootstrap4 导航我正在尝试将 css 类更改为 display: 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

试试 this demo代码。

在 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 状态下有人会如何选择另一个标签