Angular - 点击更改 Font Awesome 图标颜色

Question

我创建了一个名为“like”的组件，HTML如下：

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

当我点击图标时，它应该改变变量“isActive”，因此图标的颜色也应该改变。这是 .ts 文件：

onClick() {
    this.isActive = !this.isActive;
  }

CSS：

.fa-heart {
    color: #ccc;
}

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

然而，当我点击时，“active”类并没有被添加或删除。为什么？

- mgiurni

---

你的模块中是否导入了CommonModule？ - OPulido

它运行良好：https://stackblitz.com/edit/angular-3xkkbf - Zze

根据你在@VitaliiChmovzh的回答中最后一条评论，投票将其关闭。 - Zze

Answer 1

您应该使用以下语法：

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

- Vitalii Chmovzh

---

谢谢你的回答。然而，它仍然没有起作用。 "active" 类只会根据 "isActive" 变量的初始状态添加或删除，但不会在我点击时发生变化。 - mgiurni

是的，我在方法中添加了一行“console.log（this.isActive）”，当我点击时变量就会改变它的值。 - mgiurni

这是在干净的 Angular CLI 安装上吗？我刚刚在一个干净的安装上尝试过了，它可以正常工作。 - Vitalii Chmovzh

我找到了问题所在。我是通过CDN使用Font Awesome的。我将其下载到我的项目中，然后它就可以工作了。非常感谢你的帮助。 - mgiurni