动态更改角度6中的图标

Question

我试图font-awesome根据某个值更改图标，但是即使更改了模型，它仍设置为原始图标。这是我的代码

在 Controller

if (foo.change < 0) {
   foo.icon = "fa fa-sort-down";
} else {
  foo.icon = "fas fa-sort-up";
}

在我的 HTML

<i [className]="foo.icon"></i>

有没有一种方法可以基于model或动态更新图标check？

Answer 1

使用[ngClass]

<i  [ngClass]="foo.change < 0 ? 'fa fa-sort-down' : 'fas fa-sort-up'"></i>

Answer 2

我在网上找到了这个：

该错误是由于 fontawesome JS 库通过共享初始元素属性的 svg 元素动态替换用特定类定义的元素，因此您不能使用元素标签名称来选择它：您需要通过以下方式选择新的 svg 创建的元素其他方式

所以，最简单的解决方案是：

<i *ngIf="foo.change < 0" [className]="fa fa-sort-down"></i>
<i *ngIf="foo.change >= 0" [className]="fas fa-sort-up"></i>