如何使用 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 問題的鏈接。