枚举类型在打字稿中给出双数组

2024-06-19

我想从枚举数据类型创建一个下拉列表,但是当我尝试将枚举更改为具有名称和值的对象时;枚举数组返回枚举成员的两倍。使用函数这个帖子 https://stackoverflow.com/questions/18111657/how-does-one-get-the-names-of-typescript-enum-entries/18112474#18112474

  • 打字稿:v 2.3.3

  • Angular v 4.3.4

附:由于角度版本,无法更新打字稿版本。下面是相关代码

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'
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

枚举类型在打字稿中给出双数组 的相关文章

随机推荐

  • 设置 SWT Shell 的默认字体

    有没有办法为整个 Shell 设置默认字体 以便任何新控件都将使用相同的字体 看来现在我必须为我创建的每个控件设置字体 这导致了太多的冗余 默认使用的字体由平台选择 请参阅中的其他信息 类字体 SWT 标准小部件工具包 http book
  • 使用 C++ 访问 Azure blob 存储 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用 AbstractTableModel 获取 JTable 中选定的行

    我有一个JTable using AbstractTableModel我在哪里有一个JCheckBox在第一列中用于选择行 现在 我需要从已检查的表中获取选定的行 现在 我按顺序从第一行遍历到最后一行并获取所有选择的行 如下所示 List
  • 我应该在 Promise.all 中使用 wait 吗?

    我正在构建快速中间件 以对数据库进行两次异步调用 以检查用户名或电子邮件是否已在使用中 这些函数返回的承诺没有捕获 因为我想将数据库逻辑与 req res next 逻辑分开 并且我有集中的错误处理 需要next作为一个论点 在我对本地环境
  • 我想自动生成这种格式的账单编号 (INV1/23) 并且它必须以 1 递增

    我想以这种格式 INV1 23 自动生成帐单号码 而不使用oracle apex中的序列 请在plsql中编写查询 我在此过程中使用了序列 但它对此不起作用 它必须以表格形式显示在交互式报告上 就像当我输入有关账单的数据 例如订单号 订单日
  • 将 std::make_unique 与自定义删除器一起使用

    在使用std unique ptr带有我想要使用的自定义删除器std make unique而不是全新的 我用的是VC 2013 在我看来 没有办法使用std unique ptr如果您使用自定义删除器 我错过了什么还是事实确实如此 附加信
  • Angularjs 范围之外的服务功能

    我在 angularJS 中创建了一个服务 它使用 btford socket io 模块与服务器交互 由于在服务中我已经实现了一些目前在 Angular 内部使用的 API 但为了以后扩展应用程序 我还需要在 Angular 范围之外提供
  • 在 woocommerce 管理订单页面中单击自定义按钮运行函数

    基于 在 woocommerce 中的管理订单列表顶部添加一个按钮 https stackoverflow com questions 49437781 add a button on top of admin orders list in
  • 无法理解寄存器和变量之间的汇编mov指令

    我在 64 位 Linux 上使用 NASM 汇编器 有一些关于变量和寄存器的东西我无法理解 我创建一个名为 msg 的变量 msg db hello world 现在 当我想写入标准输出时 我移动msg to rsi注册 但我不明白mov
  • 为什么 strcpy 的这种使用被认为是不好的?

    我发现了下面的一段C代码 标记为 BAD 又名缓冲区溢出错误 问题是我不太明白为什么 输入字符串长度在分配等之前被捕获 char my strdup const char s size t len strlen s 1 char c mal
  • Erlang:到 Python 实例的端口没有响应

    我正在尝试通过 Erlang 端口与外部 python 进程进行通信 首先 打开一个端口 然后通过 stdin 将消息发送到外部进程 我期待在进程的标准输出上得到相应的答复 我的尝试如下所示 open a port Port open po
  • Python Pandas 滚动聚合一列列表

    我有一个简单的数据框 df 和一列列表lists 我想根据以下内容生成一个附加列lists The df好像 import pandas as pd lists 1 1 2 1 2 3 3 2 9 7 9 4 2 7 3 5 create
  • 熊猫按 n 最大总和分组

    我正在尝试使用groupby nlargest and sum在 Pandas 中一起运行 但在运行时遇到困难 State County Population Alabama a 100 Alabama b 50 Alabama c 40
  • RxJ 从 observable 中获取价值

    在组件中 singleEvent Observable
  • Ember-cli 夹具加载

    我确信我错过了一些小而愚蠢的东西 但似乎无法加载我的装置 这是我有 应用程序 模型 todos js import DS from ember data var Todo DS Model extend title DS attr stri
  • 在 Windows 中使用 PHP 创建受密码保护的 Zip 文件

    我正在 PHP 中创建给定文件的 zip 文件 下面是函数 function create zip file file name zip new ZipArchive zip name file name zip Zip name zip
  • SVN 提交后挂钩在提交后不会运行

    我的服务器上设置了 SVN 存储库 并且遇到提交后问题 我在 iMac 上使用 SmartSVN 作为客户端 我通过 SmartSVN 的 ssh svn 连接 我能够成功连接到 SVN 并对其进行更改 但从 SVN 客户端提交后 我的提交
  • 将 url 参数获取到 asp.net 标签中

    我试图自动将 asp label 的文本设置为 url 参数 但它似乎不起作用 这是我的代码
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • 枚举类型在打字稿中给出双数组

    我想从枚举数据类型创建一个下拉列表 但是当我尝试将枚举更改为具有名称和值的对象时 枚举数组返回枚举成员的两倍 使用函数这个帖子 https stackoverflow com questions 18111657 how does one