angular - 动态更改 Angular 6 中的图标

标签 angular font-awesome

我正在尝试根据某个值更改 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>

有没有办法根据 modelcheck 动态更新图标?

最佳答案

我在网上找到了 this:

The error is due to the fontawesome JS library wich dynamically replace the elements defined with specific classes by svg elements sharing attributes of the initial element, so you cannot use the element tag name to select it: you need to select the new svg created element by another way



因此,最简单的解决方案是:
<i *ngIf="foo.change < 0" [className]="fa fa-sort-down"></i>
<i *ngIf="foo.change >= 0" [className]="fas fa-sort-up"></i>

关于angular - 动态更改 Angular 6 中的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57587242/

相关文章:

css - 错误的字体渲染 Chrome

javascript - 我在哪里从库中获取变量的 typescript 类型

angular - Angular2 没有 ng-init

angular - 始终需要 react 形式的 Angular 4 DatePicker 的 ngBootstrap

css - Font Awesome 需要反转

带有 Font Awesome 图标的 JavaScript 切换按钮

html - 在按钮文本上方显示 Font Awesome 图标

Angular 程序菜单组件模板不起作用

angular - 事件单击开始并单击 realease angular(4)

在对话框中打开时, Angular 垫 slider 动画从 100 到 0