角度 - 更改字体点击时的真棒图标颜色

Question

我创建了一个名为＆＃34的组件;喜欢＆＃34;使用以下HTML：

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

当我点击图标时，它应该更改变量＆＃34; isActive＆＃34;因此，图标的颜色也应该改变。这是.ts：

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

CSS：

.fa-heart {
    color: #ccc;
}

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

然而，＆＃34;活跃＆＃34;单击时未添加或删除类。为什么呢？

Answer 1

您应该使用以下语法：

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