代码之家 › 专栏 › 技术社区 › Zaw Than oo

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

typescript2.0 typescript angular

1

Zaw Than oo · 技术社区 · 6 年前

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();
    }
}

更新

目的是在UI中显示

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>

2 回复 | 直到 6 年前

1

6

Sivakumar Tadisetti zeah 6 年前

你可以用 keyvalue 管道如下图所示,工作示例如下所示 Stackblitz 还有你的 enum 语法错误。。。请检查 Enums

注: 角度6

请检查 Angular 6.1 introduces a new KeyValue Pipe

类型.ts代码

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

组件.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;
}

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

更新:

请检查其中一个 question

2

-1

Noor A Shuvo 6 年前

首先,枚举语法将

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

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

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

等。。