单击开关更改颜色

Question

我有一些标签（ID、从 ID 开始、车辆名称...等）我想在选择时更改颜色（类似于 "active"选项卡）。

事情是，在每个标签旁边我都有 "sort" 图标，当排序按顺序（白色）或反向（红色）时，该图标会改变它的颜色。

我想要的是更改标签文本的颜色，以便用户可以知道当时哪个元素处于活动状态，无论该排序是按顺序还是反向。

我该怎么做？有什么办法可以用 ngClass,ngStyle 来实现吗？我正在使用 Angular 2

Html 用于标签、排序图像等的代码

<div class="vessel-label-div">
        <div class="field-width8">
            <label class="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="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="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 中定义两个类，例如

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

单击开关更改颜色

Change color on click with switch

colors

switch-statement

ng-style

angular