html - 通过 Angular 组件更改字体很棒的图标

标签 html css angular font-awesome angular-fontawesome

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

结果是,定义的第一个图标正确显示,但我所做的任何后续更改(这些更改应该反射(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>

最佳答案

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

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

关于html - 通过 Angular 组件更改字体很棒的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52296567/

相关文章:

html - 如何使用 RESTful API 提供静态(或动态?)HTML 文件?

javascript - 如何创建一个在鼠标悬停时显示消息的文本框?

javascript - 使用 javascript/jquery 创建一个 <li> 元素并将其添加到有序列表

html - 固定 div 旁边的流体 div

javascript - jQuery this() 似乎不起作用

css - 表单元素忽略主体 CSS

javascript - 并排动态创建div

javascript - 从 typescript 访问 HTML header 中包含的 javascript 变量

Javascript:过滤具有重复日期的数组

Angular:从另一个指令获取主机上一个指令实例的引用