时间戳

首页 > 解决方案 > Angular：显示来自ngrx的fontawesome图标

html - Angular：显示来自ngrx的fontawesome图标

问题描述

我在来自 API 的响应中保存了这样的图标字符串：

  {
    "icone": "fas fa-thermometer-half",
    "cor1": "#FFF",
    "cor2": "000"
  }

在 Angular 10 应用程序中，我从 NGRX 商店获得。

  public test$ = this.store.pipe(select(fromTest.getTest))

然后我尝试在 HTML 组件上呈现。

<ng-container *ngIf="test$ | async as tes">
   <i class="{{tes[1].icone}}"></i>
</ngcontainer>

html的结果是：

<i _ngcontent-yaa-c157="" class="fa-thermometer-half fas"></i>

并且不显示...在 NGRX 商店，我可以看到这样的 icone 字符串： icone:"fas fa-thermometer-half" 我不知道为什么在渲染时会发生这种变化，但这不是问题所在。

标签： htmlangularfont-awesomengrxngrx-store

解决方案

更改图标类绑定

   <i class="{{tes[1].icone}}"></i>

至

   <i [ngClass]="{{tes[1].icone}}"></i>

推荐阅读