无法在 Angular 组件中正确使用 fontawesome 图标答案

【问题标题】：Can't use fontawesome icons properly in component in angular无法在 Angular 组件中正确使用 fontawesome 图标
【发布时间】：2021-03-29 22:07:42
【问题描述】：

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

我正在构建这个角组件，当它被点击时它会显示实心星形图标（isChecked 值为 true），而当它不是时显示空星形（isChecked 值为 false）。但是，我面临如何使用class.fa-star 的问题，因为角度会混淆显示哪个fa-star（实心或空心星，因为两者具有相同的名称但不同类别的图标）。

我尝试做“class.fas fa-star”，但它给了我一个错误。

【问题讨论】：

标签： angular frontend

【解决方案1】：

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

在你的component.ts

isChecked: boolean = false;

这是你在 stackblitz 上的工作代码：here

【讨论】：

这不起作用 :( 一个 fa-star 来自 fas(solid)，一个来自 far(star regular)。onClick() 函数工作正常，问题出在 class.fa-star ，现在这混淆了要显示什么星的角度，实心还是常规？我不能使用“class.fas fa-star”。请帮助
在你的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>

【讨论】：