用开关点击改变颜色

我有一些标签（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）...现在我可以切换红色当我点击标签，但我也可以删除红色当我再次点击排序图标...可以留下红色标签，只要我在该标签上使用排序（我多次点击排序图标），它只会改变标签的颜色，如果我选择其他标签:) –

用开关点击改变颜色

回答

相关问题