Angular 角度-单击可更改字体和图标颜色

我使用以下HTML创建了一个名为“like”的组件：

<div (click)="onClick()">
   <i class="fas fa-heart" [class.active]="isActive"></i>
</div>

CSS:

---

但是，当我单击时，不会添加或删除“活动”类。为什么？

您应该使用以下语法：

<div (click)="onClick()">
   <i class="fas fa-heart" [ngClass]="{'active': isActive}"></i>
</div>

谢谢你的回答。然而，它仍然不起作用。“active”类的添加或删除仅取决于“isActive”变量的启动方式，而不是单击时。是的，它是。我在方法中添加了行“console.log（this.isActive）”，当我单击时，变量会更改其值。它是否在CLI安装中？我刚刚在“干净安装”上试用过，效果很好。我发现了问题。我通过它的CDN使用了字体真棒。我在我的项目中下载了它，它成功了。非常感谢您帮助我。您是否在模块中导入了CommonModule？工作正常：根据您对@VitaliiChmovzh答案的最后评论投票关闭此模块。

.fa-heart {
    color: #ccc;
}

.fa-heart.active {
    color: deeppink;
}

<div (click)="onClick()">
   <i class="fas fa-heart" [ngClass]="{'active': isActive}"></i>
</div>