Búsqueda de sitios web

javascript - cómo cambiar la clase css dinámicamente con angular

Estoy usando navs de Bootstrap 4 con un formulario. Estoy intentando cambiar la clase CSS a display: none; para cada pestaña que no esté seleccionada. He intentado hacer esto usando ngClass, pero no funcionó. Demo en 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>

Respuesta #1

Prueba este código de demostración.

Creé un método en el archivo ts como:

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

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

reemplace el código anterior de [ngStyle] con el siguiente para cumplir con su requisito de display:none

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

No estoy seguro de cómo alguien podría seleccionar otra pestaña cuando está en estado display:none

Respuesta #2

Aquí está desde los documentos https://angular.io/api/common/NgClass

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

Pero dado que solo estás tratando de establecer un solo estilo, Shashank Vivek tiene razón en que deberías intentar en su lugar https://angular.io/api/common/NgStyle <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

Lo que haría tu ejemplo (¡necesitas los corchetes!):

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

Esto establece display: none cuando active === false

Artículos relacionados