Question

我有一些标签（ ID，ID后开始，车辆名称 ...等），我想在选择时更改颜色（类似“活动”标签）。

事情就是每个标签旁边都有“排序”图标，当排序顺序（白色）或反向（红色）时，该图标会改变颜色。

我想要的是改变标签文本的颜色，以便用户可以知道那个元素在那个时刻排序有效，那个排序是有序还是反向。

我该怎么做？有没有办法用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中定义两个类，例如

selectedLabel: string = ' ';

在你的ts：

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

点击后更新：

{{1}}

点击切换时更改颜色

1 个答案: