typescript – 根据Angular2中的枚举选择

发布时间：2020-12-17 08:07:58 所属栏目：安全来源：网络整理

导读：我有这个枚举(我使用的是TypeScript)： export enum CountryCodeEnum { France = 1,Belgium = 2} 我想在我的表单中构建一个选择，对于每个选项，枚举整数值作为值，枚举文本作为标签，如下所示： select option value="1"France/option option value="2"Belg

我有这个枚举(我使用的是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;
}

Plunker

参见How to use *ngFor with Object?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!