Angular 2 改变 Class 条件

Question

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

[ngClass]="'active'"

现在的问题是，当单击另一个按钮时，第一个按钮保持活动状态 class。我正在评估基于字符串显示的数据。单击每个按钮时，字符串会发生变化。

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

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

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

这是我当前的按钮，但是当我用这种语法添加时 class 没有被添加：

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

[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

例如，如果您想要添加许多 classes 并且有两个或更多条件，每个 class 和条件您可以在 , 逗号之后添加。

例如

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

Angular 2 改变 Class 条件

Angular 2 Change Class On Condition

javascript

typescript

angular2-directives

angular2-template

angular