Angular: отображение значка fontawesome из ngrx

#html #angular #font-awesome #ngrx #ngrx-store

#HTML #angular #шрифт-потрясающий #ngrx #ngrx-магазин

Вопрос:

Я сохраняю строку значка, подобную этой, в своем ответе от 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-термометр-половина», и я не знаю, почему это меняется при визуализации, но это не проблема.

Ответ №1:

Измените привязку класса значка с

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

Для

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

1. Я попробовал еще раз, после перезапуска приложения, и я получаю новую ошибку. ERROR Error: Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded! - JIT compilation is discouraged for production use-cases! Consider AOT mode instead. - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'? - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping. Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

2. Исправлена ошибка, та же проблема, когда я пытаюсь с помощью [ngClass] .. не отображать значок. <i class=»fa-thermometer-half fas»></i> Работает хорошо, но не тогда, когда вместо этого я использую строку из ngrx или component .

3. Поместите ваш запрос на хранилище в AfterViewInit-хук