我有这个枚举(我使用的是TypeScript):
- export enum CountryCodeEnum {
- France = 1,Belgium = 2
- }
我想在我的表单中构建一个选择,对于每个选项,枚举整数值作为值,枚举文本作为标签,如下所示:
- <select>
- <option value="1">France</option>
- <option value="2">Belgium</option>
- </select>
我该怎么做?
更新
而不是管道:[KeysPipe]
使用
- @NgModule({
- declarations: [KeysPipe],exports: [KeysPipe],}
- export class SharedModule{}
- @NgModule({
- ...
- imports: [SharedModule],})
原版的
使用http://stackoverflow.com/a/35536052/217408键
我不得不修改一下管道,使其正常工作与枚举
(另见How does one get the names of TypeScript enum entries?)
- @Pipe({name: 'keys'})
- export class KeysPipe implements PipeTransform {
- transform(value,args:string[]) : any {
- let keys = [];
- for (var enumMember in value) {
- if (!isNaN(parseInt(enumMember,10))) {
- keys.push({key: enumMember,value: value[enumMember]});
- // Uncomment if you want log
- // console.log("enum member: ",value[enumMember]);
- }
- }
- return keys;
- }
- }
- @Component({ ...
- pipes: [KeysPipe],template: `
- <select>
- <option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option>
- </select>
- `
- })
- class MyComponent {
- countries = CountryCodeEnum;
- }