通过Angular组件更改字体真棒图标

Question

我正在使用带有Angular 5的font-awesome版本4.7.0。当我向屏幕添加图标时，图标会立即从标记更改为，并且我无法从Angular组件访问其类，这是我想要做的。

由此产生的行为是所定义的第一个图标正确显示，但我所做的任何后续更改应该反映在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>

Answer 2

尝试在组件代码本身中分配图标，例如：

在组件中

getIcon(){
   sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 
  'icon-sort-down'
}

我认为它与变化检测有关，或者您可以在排序后通过导入变化检测手动触发它。

例如：

`constructor(cd: ChangeDetectorRef) {}`

然后在你的代码中

    this.cd.detectChanges();