用開關點擊改變顏色

我有一些標籤（ID，開始ID後，船名 ...等），我想改變顏色時選擇（如「活躍」選項卡）。用開關點擊改變顏色

事情是，每個標籤旁邊都有「排序」圖標，當排序順序爲（白色）或反向（紅色）時，該圖標會改變顏色。

我想要的是改變標籤文本的顏色，以便用戶能夠意識到哪些元素是排序激活的那一刻排序是按順序還是反向。

我該怎麼做？有沒有辦法用ngClass，ngStyle做到這一點？我使用角2

HTML代碼標籤，排序圖像和你的CSS，例如等

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

來源

2017-09-14 Vladimir Tomasevic MyNameIsVLT

定義兩類

.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>

來源

2017-09-14 21:18:54 Faisal

它適用於標籤交換色彩，但是當我想點擊其他一些標籤進行排序通過這個標準，顏色仍然停留在之前我做過的標籤上...有沒有辦法在當時選擇的標籤（比如說紅色）上改變顏色，而所有其他標籤是默認的（白色）？謝謝 –

在你的班級中定義一個變量，並用它來切換顏色。我會更新我的回答 – Faisal

它仍然影響我的IMG變化（選擇1）...現在我可以切換紅色當我點擊標籤，但我也可以刪除紅色當我再次點擊排序圖標...可以留下紅色標籤，只要我在該標籤上使用排序（我多次點擊排序圖標），它只會改變標籤的顏色，如果我選擇其他標籤:) –

用開關點擊改變顏色

回答

相關問題