如何使用 class 与 font-awesome 图标绑定？

Question

我正在尝试根据变量的值显示两个不同的图标。 如果它是真的，我想显示向上箭头，如果它是错误的，我想显示向下箭头。 但它似乎根本不起作用，我不知道为什么。 这是代码-

<div class="custom-class" (click)="changeValue()">
<i class="fa fa-lg " [ngClass]="isValue ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'"></i>
</div>

我的组件 class 有这样的东西 -

private isValue: boolean = true;
changeValue() {
    this.isValue = !this.isValue;
  }

我不知道为什么它不能正常工作。 我正在使用 font-awesome v6 和 angular 14。有人可以帮我吗？

Answer 1

认为您使用[ngClass]有点错误。 以下是您可以做到这一点的不同方法：

使用[ngClass] ：

<i class="fa fa-lg "
   [ngClass]="{ 'fa-chevron-circle-up': isValue, 'fa-chevron-circle-down': !isValue }"
></i>

使用[class.*]绑定（我最喜欢的）：

<i class="fa fa-lg "
   [class.fa-chevron-circle-up]="isValue"
   [class.fa-chevron-circle-down]="!isValue"
></i>

更多关于 class 绑定的文档可以在这里找到： https://angular.io/guide/class-binding

Answer 2

我切换到 angular-fontawesome，它似乎正在使用它。 ngClass 不能正确地与 @fortawesome/fontawesome-free@5.9.0 一起使用，因为<i> dom 被替换为<svg> dom。 这是 github 问题的链接。