如何为 ngFor 中的每个元素显示不同的图标？答案

【问题标题】：How can I display a different icon for each element in ngFor?如何为 ngFor 中的每个元素显示不同的图标？
【发布时间】：2019-05-15 17:06:45
【问题描述】：

我使用 ngFor 遍历设备列表，然后在表格中显示设备。我想在与元素对应的设备名称旁边显示一个图标。例如，如果元素是“手机”，那么将有一个移动图标，而下一个元素，相机，将有一个相机图标。

<tbody>
  <tr *ngFor="let item of deviceTypes"> 
    <td>{{ item.nameEn }}</td>
    <td style="text-align:center">
    <button class="btn btn-outline-primary" title="View" 
    (click)="viewDevice(item._id, item.nameEn)">
        <i class="fa fa-eye clickable"></i>&nbsp;{{
        'btn_elements.view' | translate }}</button>
    </td>
  </tr> 
</tbody>

【问题讨论】：

[ngClass]="" 假设您的对象中有与相应图标类直接相关的内容。

标签： angular ngfor

【解决方案1】：

您可以在您的项目中拥有一个带有图标名称的属性：

item.icon = 'camera';

然后设置图标类：

<i class="fa clickable" [ngClass]="item.icon"></i>

或者：

在函数内部进行映射：

<i class="fa clickable" [ngClass]="getIcon(item._id)"></i>

icons = new Map([[1, 'camera'], [2, 'phone']);

getIcon(deviceId: string): string {
   return this.icons.get(deviceId);
}

【讨论】：