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

Question

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

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

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