スイッチでクリックすると色が変わります

Question

「アクティブ」タブのように色を変更したい場合は、ラベル（ID、開始後ID、船舶名 ...など）があります。

「ソート」アイコンはすべてのラベルの横にあり、ソート順（白）または逆（赤）のときに色が変わります。

私がしたいのは、ラベルテキストの色を変更して、そのソートが順番に逆順になっている瞬間にどの要素がソートされているかを知ることができるようにすることです。

どうすればいいですか？ ngClass、ngStyleでそれを行う方法はありますか？私は、画像を並べ替えるとなど

<div class="vessel-label-div"> 
     <div class="field-width8"> 
      <label class="vessel-label-style">ID</label> 
      <div (click)="showSelected1()"> 
       <span *ngIf="!selected1"><div class="sort-image-div" (click)="sortByIdUp()"><img src="/images/sort1.png" style="width: 98%;"></div></span> 
       <span *ngIf="selected1"><div class="sort-image-div" (click)="sortByIdDown()"><img src="/images/sort2b.png" style="width: 98%;"></div></span> 
      </div> 
     </div> 
     <div class="field-width9"> 
      <label class="vessel-label-style">Start after ID</label> 
      <div (click)="showSelected2()"> 
       <span *ngIf="!selected2"><div class="sort-image-div" (click)="sortByAfterIdUp()"><img src="/images/sort1.png" style="width: 98%;"></div></span> 
       <span *ngIf="selected2"><div class="sort-image-div" (click)="sortByAfterIdDown()"><img src="/images/sort2b.png" style="width: 98%;"></div></span> 
      </div> 
     </div> 
     <div class="field-width16"> 
      <label class="vessel-label-style">Vessel name</label> 
      <div (click)="showSelected3()"> 
       <span *ngIf="!selected3"><div class="sort-image-div" (click)="sortByNameUp()"><img src="/images/sort1.png" style="width: 98%;"></div></span> 
       <span *ngIf="selected3"><div class="sort-image-div" (click)="sortByNameDown()"><img src="/images/sort2b.png" style="width: 98%;"></div></span> 
      </div> 
     </div> 

Answer 1

あなたのCSS、例えばに2つのクラスを定義し、ラベルの角度2

HTMLコードを使用しています

.white { 
    color: white; 
} 
.red { 
    color: red; 
} 

あなたのTSに

：

selectedLabel: string = ' '; 

そしてアップデートそのクリック上：

<div class="field-width8"> 
    <label class="vessel-label-style" [ngClass]={'red': selectedLabel === 'ID' }">ID</label> 
    <div (click)="showSelected1()"> 
    <span *ngIf="!selected1"><div class="sort-image-div" (click)="sortByIdUp(); selectedLabel='ID';"><img src="/images/sort1.png" style="width: 98%;"></div></span> 
    <span *ngIf="selected1"><div class="sort-image-div" (click)="sortByIdDown(); selectedLabel=' ';"><img src="/images/sort2b.png" style="width: 98%;"></div></span> 
    </div> 
</div>