在TypeScript/Angular 4+；中将枚举键显示为字符串；

当我记录

Type.Type_1

时，默认情况下调用

toString

方法

export enum Type {
    TYPE_1 : "Apple",
    TYPE_2 : "Orange",
    TYPE_3 : "Banana"
}

我的期望是结果是这样的

console.log(Type.TYPE_1 + " is " + Type.TYPE_1.toString());

Output => Apple is Apple

如何以字符串形式记录/获取密钥

TYPE_1

有没有办法像下面这样执行

覆盖方法

导出枚举类型{
键入_1：“苹果”，
类型2：“橙色”，
类型3：“香蕉”
toString（）{
this.key+“是”+this.toString（）；
this.key+是“+this.value（）；
}
}

我已经在谷歌上搜索了，我还没好

更新

let curList = new Map()
    .set("USD","US Dollar")
    .set("MYR","Malaysian Dollar")
    .set("SGD", "Singapore Dollar");

export enum Type {
  USD = "US Dollar",
  MYR = "Malaysian Ringgit",
  SGD = "Singapore Dollar",
  INR = "Indian Rupee",
  JPY = "Japanese Yen"
}

import { Component } from '@angular/core';
import { Type } from './types';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';
  states = Type;
}

目的是在UI中显示

export enum Type {
    TYPE_1 : "Apple",
    TYPE_2 : "Orange",
    TYPE_3 : "Banana"

    toString() {
        this.key + " is " + this.toString();
        <or>
        this.key + " is " + this.value();
    }
}

导出枚举货币{
美元：“美元”，
马来西亚令吉：“马来西亚令吉”，
新加坡元：“新加坡元”，
印度卢比：“印度卢比”，
日元：“日元”
}
currencyList:Currency[]=[Currency.USD，Currency.MYR，Currency.SGD，Currency.INR，Currency.JPY]；
{{currency}}是{{currency.toString（）}

首先，枚举语法将是

export enum Currency {
    USD : "US Dollar",
    MYR : "Malaysian Ringgit",
    SGD : "Singapore Dollar",
    INR : "Indian Rupee",
    JPY : "Japanese Yen"
}

currencyList : Currency[]= [Currency.USD, Currency.MYR, Currency.SGD, Currency.INR, Currency.JPY];

<table>
    <tr *ngFor="let currency of currencyList">
        <td>
            <input name="radioGroup" type="radio" [(ngModel)]="selectedType" [value]="currency">

            <label>{{currency}} is {{currency.toString()}}</label>    
            <!--
                here expectiation is Example 
                    USD is US Dollar
                    MYR is Malaysian Ringgit
                    SGD is Singapore Dollar
                    ....

                Now I get "US Dollar is US Dollar"....
            -->             
        </td>
    </tr>
</table>

默认情况下，您不能直接这样做。无法获取枚举的密钥。 但是，您可以通过迭代来实现它，这并不是您所知道的最好的事情。 你可以试试

enum Type {
    TYPE_1 = "Apple",
    TYPE_2 = "Orange",
    TYPE_3 = "Banana"
}

更新：

当您手动构造数组时

console.log(Object.keys(Type).find(key => Type[key] === Type.TYPE_1)+ " is "+ Type.TYPE_1);

那么，为什么不在这里添加一个映射，然后遍历它呢

currencyList : Currency[]= [Currency.USD, Currency.MYR, Currency.SGD, Currency.INR, Currency.JPY]; 

---

等等。

您可以像下面那样使用

keyvalue

管道，工作示例在这里，您的

enum

语法错误。。。请查收

注意：下面的一个表示角度6

请查收

types.ts代码

let curList = new Map()
    .set("USD","US Dollar")
    .set("MYR","Malaysian Dollar")
    .set("SGD", "Singapore Dollar");

export enum Type {
  USD = "US Dollar",
  MYR = "Malaysian Ringgit",
  SGD = "Singapore Dollar",
  INR = "Indian Rupee",
  JPY = "Japanese Yen"
}

import { Component } from '@angular/core';
import { Type } from './types';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';
  states = Type;
}

Component.ts代码

let curList = new Map()
    .set("USD","US Dollar")
    .set("MYR","Malaysian Dollar")
    .set("SGD", "Singapore Dollar");

export enum Type {
  USD = "US Dollar",
  MYR = "Malaysian Ringgit",
  SGD = "Singapore Dollar",
  INR = "Indian Rupee",
  JPY = "Japanese Yen"
}

import { Component } from '@angular/core';
import { Type } from './types';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';
  states = Type;
}

组件模板代码

let curList = new Map()
    .set("USD","US Dollar")
    .set("MYR","Malaysian Dollar")
    .set("SGD", "Singapore Dollar");

export enum Type {
  USD = "US Dollar",
  MYR = "Malaysian Ringgit",
  SGD = "Singapore Dollar",
  INR = "Indian Rupee",
  JPY = "Japanese Yen"
}

import { Component } from '@angular/core';
import { Type } from './types';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  name = 'Angular';
  states = Type;
}

{{state['key']+“是“+state['value']}”

更新：

---

对于Angular<6请检查其中一个stackoverflow

是否

enum

语法错误，请检查这是我为您提供的解决方案？