Angular如何有条件地更改css类？答案

【问题标题】：Angular how to conditionally change css class?Angular如何有条件地更改css类？
【发布时间】：2021-10-01 19:27:49
【问题描述】：

我有一个带有默认类的图标，类名为 card-icon ，现在如何根据条件更改类或禁用类？

因为现在满足条件或条件为真时，图标的默认颜色为灰色，所以我想将其更改为黑色。

条件如下，当条件为真时禁用 class="card-icon" 或者如果无法禁用则替换一个新类，例如 [class.newclass]。

知道如何实现这些家伙吗？谢谢。

#带有默认类的图标

 <mat-icon class="card-icon">group</mat-icon>

#条件

<mat-icon class="active-icon" [class.newclass]="currentTabElement === 'group'">group</mat-icon>

【问题讨论】：

这不是stackoverflow.com/questions/35269179/…的副本
我认为没有，先生，。
我的意思是它基本上是一样的。考虑到这些信息，您可以构建自己的解决方案。无论如何，欢迎使用 StackOverflow！
这能回答你的问题吗？ Angular: conditional class with *ngClass

标签： javascript css angular typescript

【解决方案1】：

您可以使用 angular 中的ng class 属性在 CSS 类之间切换为例，如果我想创建一个需要在深色背景和浅色背景之间切换的切换按钮，我可以进行以下更改。

HTML 文件
<div [ngClass]="{'black-background':blacked, 'white-background':!blacked}">

CSS / SCSS 文件

.black-background {
    background-color: #000;
}
.white-background {
    background-color: #FFF;
}

TypeScript 文件 在打字稿文件中，您需要有属性blacked，我们在HTML标签中传递的值需要是true或false

blacked = true;

目前，blacked 的值为真，所以black-background 的值为true，所以现在我们可以看到黑色背景。如果属性blacked=false; 则white-background 值为true，因为我们通过white-background:!blacked。这样我们就可以在 CSS 类之间切换。

【讨论】：

【解决方案2】：

使用ngClass。

 <mat-icon [ngClass]="{'card-icon': true, 'active-icon': currentTabElement === 'group'}">group</mat-icon>

上面的代码会将card-icon 类添加到所有图标，而active-icon 类仅当条件currentTabElement === 'group' 评估为真时。 p>

【讨论】：

我尝试了上面的实现先生，但它不起作用 [ngClass]="{'card-icon': true, 'active-icon': currentTabElement === 'group'}"
@TimLaunders 缺少右括号，我已经编辑了代码。我能够在本地运行它，您确定条件正确吗？当条件评估为 true 时，您是否看到添加了 active-icon 类？