如何在Angular/TypeScript中显示Enum枚举实体对应的名称？

问题根因 #

你当前的判断逻辑不生效、拿不到对应值的原因有两个：

1. 你定义的Type枚举的键是全大写格式TOOL_H，但你页面输出的tool.type是首字母大写的字符串Tool_H，二者无法匹配
2. Type.TOOL_H的取值是你枚举定义的对应值'Some..'，和tool.type的取值'Tool_H'属于完全不同的字符串，全等判断必然返回false

解决方案 #

方法1：直接在模板取值（最简方案）

不需要写大量*ngIf分支判断，直接将tool.type转成大写后作为枚举的索引取值即可：

<!-- 直接输出TOOL_H对应的字符串Some.. -->
{{ Type[tool.type.toUpperCase()] }}

如果需要实现你原来的判断逻辑，修改为如下写法即可：

<div *ngIf="Type[tool.type.toUpperCase()] === Type.TOOL_H">Some...</div>

方法2：添加组件转换方法（适配严格类型检查）

如果你的项目开启了TypeScript严格类型检查，直接在模板写索引取值会报类型错误，可以在组件内加一个转换方法：

// app.component.ts
public getTypeLabel(typeKey: string): string {
  // 找不到对应枚举值时返回空字符串避免报错
  return Type[typeKey.toUpperCase() as keyof typeof Type] || '';
}

模板中直接调用方法即可：

{{ getTypeLabel(tool.type) }}

方法3：适配返回值调整枚举定义

如果后端返回的tool.type固定为Tool_H这种首字母大写格式，可以直接修改枚举的键名和返回值保持一致，就不需要每次转大小写：

export enum Type{
  All = 'All',
  Tool_H = 'Some..',
  Tool_B = 'Stuff..',
  Tool_S = 'to..',
  Tool_C = 'Show..',
}

模板直接取值即可：

{{ Type[tool.type] }}

中文展示处理 #

如果你需要将枚举值展示为中文，直接修改枚举的赋值为你需要的中文内容即可，无需额外做翻译映射：

export enum Type{
  All = '全部',
  TOOL_H = '硬件工具',
  TOOL_B = '基础工具',
  TOOL_S = '系统工具',
  TOOL_C = '自定义工具',
}

通过前面的方法取值后直接就是中文内容，可直接渲染到页面。

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