如何將基於 typescript 決策的值返回到我的模板？

Question

我有一項服務返回 JSON ，其屬性名為name 。

我在我的模板中的這個 JSON 中做一個*ngFor並基於name屬性，我需要顯示一個特定的材料圖標。

我嘗試創建一個接收名稱並返回特定圖標的 function getIcon() ：

TS：

getIcon(name: string): string {
   if (name === 'h01') {
      return 'home'
   }
   else if (name === 'c30') {
       return 'clipboard'
   }
}

模板：

 <mat-icon aria-hidden="false">{{ getIcon(myJson.name) }}</mat-icon>

但是每次我在我的屏幕上做一個動作，例如點擊一個按鈕，這個 function 被再次調用幾次，所以，我正在尋找是否有更好的方法來做到這一點。

Answer 1

您可以使用 Angular管道解決問題

src/app/pipes/icon-name.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'iconName',
  pure: false // detect object change
})
export class IconNamePipe implements PipeTransform {
  transform(value: string, fallback: string = ''): string {
    if (name === 'h01') {
      return 'home';
    }
    else if (name === 'c30') {
       return 'clipboard';
    }
    return fallback;
  }
}

模板

 <mat-icon aria-hidden="false">{{ myJson.name | iconName: 'default-icon' }}</mat-icon>