Изменяющий шрифт потрясающие иконки через угловые компоненты

Question

Я использую font-awesome версии 4.7.0 с Angular 5. Когда я добавляю значок на экран, значок сразу меняется с тега на, и я не могу получить доступ к его классу из компонента Angular, что я и хочу сделать.

В результате получается, что первый определенный значок отображается правильно, но любые последующие изменения, которые я должен внести, которые должны быть отражены в пользовательском интерфейсе с изменением шрифта, значок awesome вообще не отображаются.

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

Answer 1

Это потому, что fontawesome заменяет ваш тег на.Чтобы изменить значки, используйте этот шаблон (используйте в нужном вам классе):

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

Answer 2

Попробуйте, возможно, назначить значок в самом коде компонента, например:

в компоненте

getIcon(){
   sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 
  'icon-sort-down'
}

Я думаю, что это связано с обнаружением изменений, или вы можете вручную запустить его после сортировки, импортировав обнаружение изменений.

например:

`constructor(cd: ChangeDetectorRef) {}`

и затем в вашем коде,

    this.cd.detectChanges();