如何為ngFor中的每個元素顯示不同的圖標？

Question

我使用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>

Answer 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);
}