Блог

Главная - Вопросы по программированию - Не удается правильно использовать значки fontawesome в компоненте в angular

Не удается правильно использовать значки fontawesome в компоненте в angular

#angular #frontend

#angular #интерфейс

Вопрос:

 <i class="fas far"
  [class.fa-star]= "isChecked"
  [class.fa-star]= "!isChecked"
  (click)="onClick()"
></i>

Я создаю этот угловой компонент, в котором при нажатии на него отображается значок сплошной звезды ( isChecked значение равно true) и пустая звезда, когда это не так ( isChecked значение равно false). Но я сталкиваюсь с этой проблемой в том, как использовать class.fa-star , потому что angular будет запутан в том, что fa-star отображать (сплошная или пустотелая звезда, потому что у обоих одинаковое имя, но разные классы значков).

Я попытался сделать «класс. fas fa-star», но он выдает ошибку.

Ответ №1:

 <i class="fa" 
    [class.fa-star]="isChecked"
    [class.fa-star-o]="!isChecked"
    (click)="isChecked = !isChecked">
</i>

в вашем component.ts 

 isChecked: boolean = false;

вот ваш рабочий код на stackblitz: здесь

Комментарии:

1. Это не работает: (одна звезда fa — от fas (solid) и одна от far (обычная звезда).). функция onClick () работает нормально, и проблема заключается в class.fa-star, теперь это сбивает angular с толку относительно того, какую звезду отображать, сплошную или обычную? я не могу использовать ‘class.fas fa-star’. пожалуйста, помогите

2. Импортируйте это в начало вашего index.html . Просто используйте fa в своем классе. Он fa-star твердый, пока fa-star-o он священный. Смотрите приведенный выше код и проверьте stackblitz <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Ответ №2:

Не совсем уверен, с какой именно проблемой вы столкнулись. но если вы хотите использовать несколько классов одновременно, вы можете использовать [ngClass] атрибут для достижения этого, как показано ниже

 <i class="fa-star"
    [ngClass]="{'far class1 class2': isChecked, 'fas class3 class4': !isChecked}"
    (click)="isChecked = !isChecked">
</i>