Question

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

我登录Type.TYPE_1时，默认情况下会调用toString方法。

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

Output => Apple is Apple

我的期望是结果就像

Output : TYPE_1 is Apple

如何将密钥TYPE_1记录/获取为字符串？

是否可以按照以下方式进行override method？

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

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

我已经对此进行了搜索，但还不行。

更新

目的是在用户界面中显示

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>

Answer 1

您可以使用keyvalue管道，如下所示，工作示例在Stackblitz中，并且您的enum语法错误...请检查Enums

注意：：下面的一个表示 Angular 6

请检查Angular 6.1 introduces a new KeyValue Pipe

types.ts代码

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

Component.ts代码

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.template代码

<table>
    <tr *ngFor="let state of states | keyvalue">
        <td>
            <input name="radioGroup" type="radio" [(ngModel)]="selectedType" [value]="currency">
            <label>{{state['key'] +" is "+ state['value']}}</label>             
        </td>
    </tr>
</table>

更新：

对于 Angular <6 ，请检查stackoverflow question

之一

Answer 2

首先，枚举语法为

Enter the amount of rolls: 5
Enter the amound of sides: 5

In 5 rolls, you rolled: 
  Rolled 1: 1 times
  Rolled 2: 2 times
  Rolled 3: 1 times
  Rolled 4: 1 times
  Rolled 5: 0 times
2 was rolled the most, for a total of 2 times

默认情况下，您不能直接执行此操作。您无法获取枚举的键。但是，您可以通过迭代来实现，这并不是您所知道的最好的事情。你可以尝试

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];

等等。

Answer 3

在我们得到答案之前，我们需要澄清一下，

正如其他人已经提到的，字符串枚举语法应该是 -

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

我认为这里对 toString 方法的理解不正确。把它看成一个 JS 对象： const currency = { "USD" : "US Dollar", "MYR" : "Malaysian Ringgit" } 当您将键传递给对象时，无论您是否使用 toString，它总是会返回值。

现在来到解决方案，我从未在 Angular 中工作过，所以提前为 Angular 语法道歉。但是我遇到了一个类似的问题，我需要在下拉列表中显示关键字符串。我通过将枚举作为对象循环来使其工作。对于这个特定的问题，而不是，

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

我可能已经做到了：

const currencyCodes = Object.keys(Currency) 
<table>
    <tr *ngFor="let currencyCode of currencyCodes">
        <td>
            <input name="radioGroup" type="radio" [(ngModel)]="selectedType" [value]="currency">
            <label>{{currencyCode}} is {{Currency[currencyCode]}}</label>
        </td>
    </tr>
</table>

在TypeScript / Angular 4+中将Enum键显示为字符串

3 个答案: