Angular 2在条件下更改类

Posted 2023-02-22

【中文标题】Angular 2在条件下更改类

【英文标题】：Angular 2 Change Class On Condition

【发布时间】：2017-03-22 11:56:38

【问题描述】：

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

【问题讨论】：

将[ngClass] 更改为ng-class。

<button ng-class="'active': shown == EQUIFAX"; (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button> 认为shown 和EQUIFAX 是变量

【参考方案1】：

在 html 中：

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

在 TS：

声明：

navColor: "white";

根据情况改变：

this.navColor = "black";

【参考方案2】：

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

例如

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

【参考方案3】：

你可以这样做：

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

【参考方案4】：

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

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

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

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

【参考方案5】：

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

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

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

【讨论】：

这给了我一个解析错误，Parser Error: Unexpected token ':'

请看我的问题，我在底部用你的答案更新了问题。我得到那个解析错误。

@wuno 在您的情况下，它必须是 [ngClass]="'active': shown == 'EQUIFAX'"，因为您想将变量 shown 与字符串 EQUIFAX 进行比较，而不是变量 EQUIFAX。

您可以像[ngClass]="'active': myString == ThisIsActiveString"; 一样检查，通过将其包含在 中使其成为对象

我仍然得到相同的解析错误。我再次使用底部的按钮更新了我的问题。您是否发现任何可能导致此问题的原因。