javascript - Angular 2 根据条件更改类

Question

我在一个 View 中有三个按钮，在页面加载时我显示第一个按钮的内容。单击按钮后，该按钮将变为事件状态，但在页面加载时，初始按钮未设置为事件状态。为了显示第一个按钮处于事件状态，我将其添加到 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 指令的更多信息并查找示例 here .