如何将基于 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>