html - 通过 Angular 组件更改 Font Awesome 图标

Question

我在 Angular 5 中使用字体超棒的版本 4.7.0。当我向屏幕添加图标时，图标立即从标记变为，我无法从 Angular 组件访问它的类，这正是我想要做的。

由此产生的行为是正确显示了第一个定义的图标，但我所做的任何后续更改都不会显示，这些更改应该通过更改 Font Awesome 图标反射(reflect)在 UI 上。

具体问题是我希望在对表格进行排序时更改图标。初始图标设置为 fa-sort，并且显示正确，但是当单击表头时，内容得到排序和更新，但图标不会更改为 fa-sort-up 或 fa-sort-down。我已经测试了逻辑并且它工作正常。

执行此操作的当前 HTML 代码如下所示:

<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>

Answer 1

这是因为 fontawesome 将您的标签替换为 .要更改图标，请使用此模板(在您需要的类里面使用):

<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>