Angular 2在条件下更改类

Question

我在一个视图中有三个按钮，在页面加载时我正在显示第一个按钮的内容。单击按钮后，该按钮将变为活动状态，但在页面加载时，初始按钮未设置为活动状态。为了显示第一个按钮处于活动状态，我将其添加到 div：

[ngClass]="'active'" 

现在的问题是，当单击另一个按钮时，第一个按钮保持活动类。我正在评估基于字符串显示的数据。单击每个按钮时，字符串都会更改。

如何添加条件来检查当前字符串？那么如果字符串与当前显示的数据匹配，那么将活动类添加到此按钮？

所以我正在寻找这样的东西：

[ngClass]="'active'" if "myString == ThisIsActiveString;

这是我当前的按钮，但是当我以这种语法添加它时没有添加类：

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

为了清楚起见，该字符串在页面加载时默认为“EQUIFAX”。

这是基于答案：

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

Answer 1

在 HTML 中：

<div [style.color]="navColor"></div>

在 TS：

声明：

navColor: "white";

根据情况改变：

this.navColor = "black";

Answer 2

例如，如果您想添加多个类并具有两个或多个条件，则可以在 , 逗号之后添加每个类和条件。

例如

[ngClass]="{'first-class': condition,
            'second-class': !condition}"

Answer 3

你可以这样做：

[class.nameForYourClss]="myString == ThisIsActiveString ";

Answer 4

[class.active]="shown == EQUIFAX" 的等价语句正在与名为 EQUIFAX 的变量进行比较。

您应该改为更改等效项以与字符串 [class.active]="shown == 'EQUIFAX'" 进行比较

使用 [ngClass] 会得到 [ngClass]="{'active': shown == 'EQUIFAX'}

这是一个实现了此功能的游乐场：http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

Answer 5

您可以根据NgClass指令本身的条件添加css类：

[ngClass]="{ 'active': myString == ThisIsActiveString }";

您可以阅读有关 NgClass 指令的更多信息并查找示例 here。