Angular：显示来自 ngrx 的超赞图标

Question

I am saving an icon string like this on my response from API:

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

At Angular 10 application I get from NGRX store.

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

Then I try to render at HTML component.

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

The result at html is:

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

And doenst show... At NGRX Store I can see the icone string like this: icone:"fas fa-thermometer-half" and I dont know why this change when rendered, but isnt the problem.

Answer 1

Change icon class binding from

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

To

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