枚举类型在typescript中给出双数组

Posted 2021-05-04

我想从枚举数据类型创建一个下拉列表，但是当我尝试将枚举更改为具有名称和值的对象时;枚举数组返回枚举成员的两倍。使用this SO post的功能

• 打字稿：v 2.3.3
• Angular v 4.3.4

PS。无法更新打字稿版本会费到角版本。以下是相关代码

export enum FrequencyEnum {
    H1 = <any>'1 Hour',
    H12 = <any>'12 Hours',
    D1 = <any>'24 Hours',
    D7 = <any>'7 Days',
    M1 = <any>'1 Month',
    M3 = <any>'3 Months',
    CD = <any>'Custom Date Range'
};
export interface Frequency {
    name: string;
    value: string;
    range?: { from: string; to: string; };
}

export function enumSelector(definition) {
    console.log('definition: ', definition);
    return Object.keys(definition)
        .map(key => ({ value: definition[key], name: key }));
}

this.frequnecyList = enumSelector(FrequencyEnum);

它给出了14个对象的数组

[
  {
    "value": "1 Hour",
    "name": "H1"
  },
  {
    "value": "H1",
    "name": "1 Hour"
  },
  {
    "value": "12 Hours",
    "name": "H12"
  },
  {
    "value": "H12",
    "name": "12 Hours"
  },
  {
    "value": "24 Hours",
    "name": "D1"
  },
  {
    "value": "D1",
    "name": "24 Hours"
  },
  {
    "value": "7 Days",
    "name": "D7"
  },
  {
    "value": "D7",
    "name": "7 Days"
  },
  {
    "value": "1 Month",
    "name": "M1"
  },
  {
    "value": "M1",
    "name": "1 Month"
  },
  {
    "value": "3 Months",
    "name": "M3"
  },
  {
    "value": "M3",
    "name": "3 Months"
  },
  {
    "value": "Custom Date Range",
    "name": "CD"
  },
  {
    "value": "CD",
    "name": "Custom Date Range"
  }
]

如何在最终数组中只获得7个值（等于枚举成员）？

答案

由于TypeScript实现枚举的方式，我担心这不太可能。如果您查看为枚举生成的javascript代码，您会看到：

var FrequencyEnum;
(function (FrequencyEnum) {
    FrequencyEnum[FrequencyEnum["H1"] = '1 Hour'] = "H1";
    FrequencyEnum[FrequencyEnum["H12"] = '12 Hours'] = "H12";
    FrequencyEnum[FrequencyEnum["D1"] = '24 Hours'] = "D1";
    FrequencyEnum[FrequencyEnum["D7"] = '7 Days'] = "D7";
    FrequencyEnum[FrequencyEnum["M1"] = '1 Month'] = "M1";
    FrequencyEnum[FrequencyEnum["M3"] = '3 Months'] = "M3";
    FrequencyEnum[FrequencyEnum["CD"] = 'Custom Date Range'] = "CD";
})(FrequencyEnum || (FrequencyEnum = {}));
;

JavaScript中的赋值表达式返回其正确的值，这意味着FrequencyEnum["H1"] = '1 Hour'计算为1 Hour并在结果对象中有效地为您提供值为'1 Hour'的属性"H1"。这就是为什么你看到这些值也显示为键，因此是你期望的键/值大小的两倍。

你可以做一个技巧并过滤掉列表中的每个偶数键，但它不是一个非常可靠的解决方案：

export function enumSelector(definition: any) {
    return Object.keys(FrequencyEnum)
                 .filter((key, i) => i % 2 == 0)
                 .map(key => ({ value: definition[key], name: key }))
}

这将为您提供输出：

[ { value: '1 Hour', name: 'H1' },
  { value: '12 Hours', name: 'H12' },
  { value: '24 Hours', name: 'D1' },
  { value: '7 Days', name: 'D7' },
  { value: '1 Month', name: 'M1' },
  { value: '3 Months', name: 'M3' },
  { value: 'Custom Date Range', name: 'CD' } ]

另一个（更好的）解决方案是不使用枚举，只使用对象文字而不是枚举：

const FrequencyEnum = {
    H1: '1 Hour',
    H12: '12 Hours',
    D1: '24 Hours',
    D7: '7 Days',
    M1: '1 Month',
    M3: '3 Months',
    CD: 'Custom Date Range'
};