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

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

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

你可以阅读更多有关NgClass指令,并找到例子这里.