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>

要清楚字符串是默认为＆＃34; EQUIFAX＆＃34;在页面加载。

这是基于答案：

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

Answer 1

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

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

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

Answer 2

[class.active]="shown == EQUIFAX"的等效声明显示为名为EQUIFAX的变量。

您应该将等效值更改为与字符串[class.active]="shown == 'EQUIFAX'"

进行比较

使用[ngClass]可以获得[ngClass]="{'active': shown == 'EQUIFAX'}

这是一个实施此操作的游乐场：http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

Answer 3

你可以这样做：

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

Answer 4

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

例如

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

Answer 5

在HTML中：

pt.array_LCL

在TS中：

声明：

myplot

根据条件进行更改：

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

Angular 2改变班级的条件

5 个答案: