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

Question

I'm trying to Display the Name of my Enum Entity within an AngularApp.

This is my Enum:

export enum Type{
  All = 'All',
  TOOL_H = 'Some..',
  TOOL_B = 'Stuff.."',
  TOOL_S = 'to..',
  TOOL_C = 'Show..',
}

in my app.component.ts i've added an method which returns an object of the Enum:

public get Type() {
  return Type; 
}

Now i'm trying to Display the Name of the Entry "Tool_H". But is there a way the get the String "Some..."?

I've also tried it with this statement, but nothing appears on the Page

<div *ngIf="tool.type === Type.TOOL_H">Some...</div>

If i'm just use the {{ tool.type }} it displays "Tool_H"

Answer 1

如果你在 html 中使用类似Type['TOOL_H'] ，你会得到'Some..' ，所以它对于显示你的枚举很有用。

<span>{{Type['TOOL_H']}}</span> // resault: 'Some..'

Answer 2

(First, I little piece of advise, I would never use a name like 'Type' for my stuff, so similar to a possible Angular reserved word).

I guess you are giving the same name to your enum (Type) and to your 'Type' variable (with the getter 'get Type()').

Try something simpler as:

export enum Type{
  All = 'All',
  TOOL_H = 'Some..',
  TOOL_B = 'Stuff..',
  TOOL_S = 'to..',
  TOOL_C = 'Show..',
}


// NOTE: If you don't have the enum definition in 'app.component.ts', import it with something like:
// import {Type} from '../../commons/enums/...';

// Forget the getter:
//public get Type() {
// return Type; 
// }

public showByType(toolType: string, myTypeSelected: string) {
   return toolType === myType
}

<div *ngIf="showByType(tool.type, Type.TOOL_B)">Some...</div>

Something like this should work well (I'm sorry, I didn't test it).

For the rest of the cases, you just have to change the enum:

<div *ngIf="showByType(tool.type, Type.TOOL_B)">'Stuff.."</div>
...