如何在Angular的ngFor循环中为不同数组值显示不同Font Awesome图标

方法一：直接复用API返回的icon字段（推荐） #

你的API响应已经包含了icon字段，直接在循环中把这个字段绑定到图标元素的class属性即可：

<div class="variety">
  <div *ngFor="let show of ArrayValue">
    <i [class]="show.icon"></i> {{show.text}}
  </div>
</div>

只需要把数组里的fas fa-<insert font awesome icon name>替换成实际的Font Awesome类名就行，比如Flowers用fas fa-seedling，Animals用fas fa-dog，循环时会自动匹配对应图标。

方法二：根据text值动态指定图标 #

如果不想依赖API返回的icon字段，也可以通过条件判断来设置图标类：

方式1：使用ngClass指令

<div class="variety">
  <div *ngFor="let show of ArrayValue">
    <i [ngClass]="{
      'fas fa-seedling': show.text === 'Flowers',
      'fas fa-dog': show.text === 'Animals'
    }"></i> {{show.text}}
  </div>
</div>

方式2：使用三元表达式

<div class="variety">
  <div *ngFor="let show of ArrayValue">
    <i class="fas" [class]="show.text === 'Flowers' ? 'fa-seedling' : 'fa-dog'"></i> {{show.text}}
  </div>
</div>

这两种方式都是通过判断show.text的值，为不同文本分配对应的Font Awesome图标类。

内容的提问来源于stack exchange，提问作者Arun