我有这个枚举(我正在使用TypeScript):
export enum CountryCodeEnum {
France = 1,
Belgium = 2
}
我想在我的表单中构建一个select,每个选项的枚举整数值为value,枚举文本为label,如下所示:
<select>
<option value="1">France</option>
<option value="2">Belgium</option>
</select>
我怎样才能做到这一点 ?
8 回答
update
而不是
pipes: [KeysPipe]
使用
original
使用https://stackoverflow.com/a/35536052/217408中的
keys
管道我不得不修改管道以使其与枚举一起正常工作(另见How does one get the names of TypeScript enum entries?)
Plunker
另见How to use *ngFor with Object?
如果您不想创建新管道,还有一个解决方案 . 您还可以将密钥提取到helper属性中并使用它:
Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview
对于Angular2 v2.0.0,这是一种非常简单的方法 . 为了完整起见,我已经包含了一个通过reactive forms设置
country
选择的默认值的示例 .另一个类似的解决方案, that does not omit "0" (如"Unset") . 使用过滤器(数字)恕我直言不是一个好方法 .
我更喜欢在我的Angular App中共享一个简单的实用程序函数,将
enum
转换为标准数组以构建选择:使用以下内容填充Component中的变量:
然后填充我的材料选择作为我的旧数组基于:
谢谢你这个帖子!
从Angular 6.1及更高版本开始,您可以使用下面的内置
KeyValuePipe
(粘贴自angular.io docs) .我假设enum包含人类友好的可读字符串当然:)
使用字符串枚举,您可以尝试这个 .
我的字符串枚举具有以下定义:
并通过以下方式转换为js:
我在我的项目中有一些这样的,所以在共享服务lib中创建了小帮助函数:
在您的组件构造函数中初始化并将其绑定到您的模板,如下所示:
在组件中:
在模板中:
不要忘记将UtilsService添加到app.module.ts中的提供者数组中,以便您可以轻松地将其注入不同的组件中 .
我是打字稿的新手,所以如果我错了或者有更好的解决方案,请纠正我 .
这个答案的另一个分离,但这实际上将值映射为数字,而不是将它们转换为字符串,这是一个错误 . 它也适用于基于0的枚举