根据Angular2中的枚举进行选择

Question

我有这个枚举（我使用的是TypeScript）：

export enum CountryCodeEnum {
    France = 1,
    Belgium = 2
}

我想在我的表单中构建一个select，每个选项的值为enum整数值，标签为enum文本，如下所示：

<select>
     <option value="1">France</option>
     <option value="2">Belgium</option>
</select>

我该怎么做？

Answer 1

对于Angular2 v2，这里有一个非常简单的方法。0.0. 为了完整起见，我提供了一个示例，通过反应式表单设置countryselect的默认值。

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <select id="country" formControlName="country">
        <option *ngFor="let key of keys" [value]="key">{{countries[key]}}</option>
      </select>
    </div>
  `,
  directives: []
})
export class App {
  keys: any[];
  countries = CountryCodeEnum;

  constructor(private fb: FormBuilder) {
    this.keys = Object.keys(this.countries).filter(Number);
    this.country = CountryCodeEnum.Belgium; //Default the value
  }
}

Answer 2

update2通过创建数组简化

@Pipe({name: 'enumToArray'})
export class EnumToArrayPipe implements PipeTransform {
  transform(value) : Object {
    return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
  }
}

@Component({
  ...
  imports: [EnumsToArrayPipe],
  template: `<div *ngFor="let item of roles | enumToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
  roles = Role;
}

使现代化

而不是管道：[KeysPipe]

使用

@NgModule({
  declarations: [KeysPipe],
  exports: [KeysPipe],
}
export class SharedModule{}

@NgModule({
  ...
  imports: [SharedModule],
})

起初的

使用https://stackoverflow.com/a/35536052/217408的key管道

我不得不对管道进行一些修改，以使其能够与enum正常工作（另请参见如何获取enum条目的名称？）

@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;
}

普朗克

另请参见如何使用*ngFor迭代对象键？

Answer 3

如果您不想创建新管道，还有一个解决方案。您也可以将密钥提取到助手属性中并使用它：

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <select>
        <option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
      </select>
    </div>
  `,
  directives: []
})
export class App {

  countries = CountryCodeEnum

  constructor() {
    this.keys = Object.keys(this.countries).filter(k => !isNaN(Number(k)));
  }
}

演示：http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

编辑：

如果您需要选项作为数字而不是字符串：

• 将[value]替换为[ngValue]
• 添加。地图（编号）在之后。过滤器（…）