我正在使用Angular2和Typscript。我有一个枚举：
export enum Role {
ServiceAdmin, CompanyAdmin, Foreman, AgentForeman,
CrewMember, AgentCrewMember, Customer
}
我想使用* ngFor迭代枚举。做这个的最好方式是什么？我必须创建一个管道吗？或者有更简单的方法吗？
枚举只是一个对象。
你的枚举在JavaScript中写得像这样：
{
0: "ServiceAdmin",
1: "CompanyAdmin",
2: "Foreman",
3: "AgentForeman",
4: "CrewMember",
5: "AgentCrewMember",
6: "Customer",
ServiceAdmin: 0,
CompanyAdmin: 1,
Foreman: 2,
AgentForeman: 3,
CrewMember: 4,
AgentCrewMember: 5,
Customer: 6
}
所以你可以这样迭代（plnkr）：
@Component({
...
template: `
<div *ngFor="let item of keys()">
{{ item }}
</div>
`
})
export class YourComponent {
role = Role;
keys() : Array<string> {
var keys = Object.keys(this.role);
return keys.slice(keys.length / 2);
}
}
或者更好地创建自定义管道：
@Pipe({
name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
transform(data: Object) {
const keys = Object.keys(data);
return keys.slice(keys.length / 2);
}
}
更新
Typescript 2.4允许枚举成员包含字符串初始化器，如：
enum Colors {
Red = "RED",
Green = "GREEN",
Blue = "BLUE",
}
在这种情况下，你可以从管道返回Object.keys(data);。
模板的范围是组件实例。如果要访问此范围之外的内容，则需要使用组件实例使其可用：
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (var enumMember in value) {
var isValueProperty = parseInt(enumMember, 10) >= 0
if (isValueProperty) {
keys.push({key: enumMember, value: value[enumMember]});
// Uncomment if you want log
// console.log("enum member: ", value[enumMember]);
}
}
return keys;
}
}
@Component({
...
pipes: [KeysPipe],
template: `<div *ngFor="let item of roles | keys">{{item}}</div>`
})
class MyComponent {
roles = Role;
}
我需要做同样的事情，也许这就是你想要的。
更多DRY，它也可以与module一起使用。
export enum Role {
ServiceAdmin, CompanyAdmin, Foreman, AgentForeman,
CrewMember, AgentCrewMember, Customer
}
export namespace Role {
export function keys(): Array<string>{
var keys = Object.keys(Role);
return keys.slice(keys.length / 2, keys.length-1);
}
}
切片之前的对象输出
{
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"ServiceAdmin",
"CompanyAdmin",
"Foreman",
"AgentForeman",
"CrewMember",
"AgentCrewMember",
"Customer",
"keys"
}
typescript合并了两个声明，因此keys.lenght-1
和ngFor：
<div *ngFor="let role of Roles.keys()">{{ role }}</div>
更多信息： Typescript's Declaration merging
基于： TypeScript: Add functions to an Enum https://basarat.gitbooks.io/typescript/content/docs/enums.html（在枚举章的末尾。）
经过对其他答案的进一步研究和回顾，我现在可以为我的问题制定答案。我认为只有在组件中没有代码支持的情况下才能使用* ngFor迭代枚举。代码支持可以包含构造函数代码，它将Enum转换为某种类型的数组，或者我们可以创建一个执行类似操作的自定义管道。
export enum Priority {
LL = 1, // VERY LOW
L = 2, // LOW
N = 3, // NORMAL
U = 4, // HIGH
UU = 5 // VERY HIGH
}
你的角度分量.ts：
import { Priority } from './../shared/core/config/datas.config';
@Component({
selector: 'app-yourcomponent',
template: `
<ng-container *ngFor="let p of getPriority">
<div> {{p.key}} / {{p.value}} </div>
</ng-container>
`
})
export class YourComponent {
getPriority = this.getENUM(Priority);
getENUM(ENUM:any): string[] {
let myEnum = [];
let objectEnum = Object.keys(ENUM);
const values = objectEnum.slice( 0 , objectEnum.length / 2 );
const keys = objectEnum.slice( objectEnum.length / 2 );
for (let i = 0 ; i < objectEnum.length/2 ; i++ ) {
myEnum.push( { key: keys[i], value: values[i] } );
}
return myEnum;
}
}
我有枚举：
export enum FileCategory {
passport = 'Multipass',
agreement = 'Personal agreement',
contract = 'Contract',
photo = 'Self photos',
other = 'Other'
}
在组件ts文件中：
export class MyBestComponent implements OnInit {
fileCategory = FileCategory;
// returns keys of enum
fileKeys(): Array<string> {
const keys = Object.keys(this.fileCategory);
return keys;
}
// returns values of enum
fileVals(): Array<string> {
const keys = Object.keys(this.fileCategory);
return keys.map(el => Object(this.fileCategory)[el]);
}
在HTML模板中显示这些枚举的值和键：
<a *ngFor="let cat of fileVals()"
(click)="addFileCategory(cat)">{{cat}}</a>
<a *ngFor="let cat of fileKeys()"
(click)="addFileCategory(cat)">{{cat}}</a>
您可以使用Angular 6.1中引入的“keyvalue”管道。
<p *ngFor="let enum of TestEnum | keyvalue">
{{ enum.key }} - {{ enum.value}}
</p>
请看这里的完整示例 - > https://stackblitz.com/edit/angular-gujg2e
在Angular 7中，使用keys（）时仍然获得所有键和值的列表。
基于以上答案，我使用这个简单的ENUM，看起来更干净，更OO：
export enum CategoryType {
Type1,
Type2,
...,
}
export namespace CategoryType {
export function keys() {
return Object.keys(CategoryType).filter(k => !isNaN(Number(k)));
}
}
然后在模板中：
<option *ngFor="let type of types.keys()" [value]="type">{{types[type]}}</option>
该函数成为枚举中的另一个条目，但会像其他非数字一样被过滤掉。
我建议您使用通用管道，它会更灵活，更少冗余。一些先前命题的问题在于，打字稿允许你有不同类型的枚举，而不仅仅是数字/字符串。
例如：
export enum NotificationGrouping {
GroupByCreatedAt = "GroupByCreatedAt",
GroupByCreatedByUser = "GroupByCreatedByUser",
GroupByEntity = "GroupByEntity",
GroupByAction = "GroupByAction",
}
这是我的解决方案：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
transform(value, args: string[]): any {
let result = [];
var keys = Object.keys(value);
var values = Object.values(value);
for (var i = 0; i < keys.length; i++) {
result.push({ key: keys[i], value: values[i] });
}
return result;
//or if you want to order the result:
//return result.sort((a, b) => a.value < b.value ? -1 : 1);
}
}
并且html将是：
<mat-select [(ngModel)]="groupKey">
<mat-option *ngFor="let group of notificationGrouping | enumToArray"
[value]="group.key">
{{ group.value }}
</mat-option>
</mat-select>
在ts：
public notificationGrouping : NotificationGrouping
注意：仍然有趣的是看到人们在没有解释的情况下减去...对于其他可能对此解决方案感兴趣的人，我可以确认它是否正常工作。