通过 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();