Wie kann ich ngFor verwenden, um Typescript Enum als Array von Zeichenfolgen zu durchlaufen?

Ich benutze Angular2 und Typscript. Ich habe eine Aufzählung:

export enum Role {
    ServiceAdmin, CompanyAdmin, Foreman, AgentForeman, 
    CrewMember, AgentCrewMember, Customer
}

Ich möchte * ngFor verwenden, um über die Aufzählung zu iterieren. Was ist der beste Weg, dies zu tun? Muss ich ein Rohr erstellen? Oder gibt es einen einfacheren Weg?

Eine Aufzählung ist nur ein Objekt.

Ihre Aufzählung ist ungefähr so ​​in JavaScript geschrieben:

{
    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
}

Sie können es also folgendermaßen iterieren ( 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);
    }
}

Oder wäre besser, benutzerdefinierte Pipe zu erstellen :

@Pipe({
  name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
  transform(data: Object) {
    const keys = Object.keys(data);
    return keys.slice(keys.length / 2);
  }
}

Beispiel

Aktualisieren

Mit Typescript 2.4 können Enum-Mitglieder Zeichenfolgeninitialisierer enthalten wie:

enum Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

In diesem Fall können Sie einfach Object.keys(data);vom Rohr zurückkehren.

Sie können einfach die in Angular 6.1 eingeführte "keyvalue" -Pipe verwenden.

<p *ngFor="let enum of TestEnum | keyvalue">
  {{ enum.key }} - {{ enum.value}}
</p>

Ein vollständiges Beispiel finden Sie hier -> https://stackblitz.com/edit/angular-gujg2e

Der Bereich der Vorlage ist die Komponenteninstanz. Wenn Sie auf etwas außerhalb dieses Bereichs zugreifen möchten, müssen Sie es über Ihre Komponenteninstanz verfügbar machen:

Dies funktioniert auch, wenn die Aufzählungstasten nicht mit 0 beginnen

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

Siehe auch https://stackoverflow.com/a/35750252/217408

Ich musste das Gleiche tun und vielleicht war es das, was du wolltest.
Mehr TROCKEN und es kann auch mit verwendet modulewerden.

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

das Objekt, das vor dem Slice ausgegeben wird

{
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "ServiceAdmin",
    "CompanyAdmin",
    "Foreman",
    "AgentForeman",
    "CrewMember",
    "AgentCrewMember",
    "Customer",
    "keys"
}

Typoskript führt die beiden Deklarationen zusammen, daher die keys.lenght-1

und die ngFor:

<div *ngFor="let role of Roles.keys()">{{ role }}</div>

Weitere Informationen:
Zusammenführung der Typescript-Erklärung

basierend auf:
TypeScript: Hinzufügen von Funktionen zu einer Aufzählung https://basarat.gitbooks.io/typescript/content/docs/enums.html (am Ende des Aufzählungskapitels )

Nach weiteren Recherchen und Überprüfungen der anderen Antworten kann ich nun eine Antwort auf meine Frage formulieren. Ich denke, es ist nicht möglich, einfach * ngFor zu verwenden, um über eine Aufzählung zu iterieren, ohne dass die Komponente Code unterstützt. Die Codeunterstützung kann aus Konstruktorcode bestehen, der die Aufzählung in eine Art Array verwandelt, oder wir können eine benutzerdefinierte Pipe erstellen, die etwas Ähnliches tut.

export enum Priority {
  LL = 1,   // VERY LOW
  L = 2,    // LOW
  N = 3,    // NORMAL
  U = 4,    // HIGH
  UU = 5    // VERY HIGH
}

Ihre Winkelkomponente.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;
  }
}

Ich habe die Aufzählung:

export enum FileCategory {
  passport = 'Multipass',
  agreement = 'Personal agreement',
  contract = 'Contract',
  photo = 'Self photos',
  other = 'Other'
}

In der Komponente ts-Datei:

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]);
  }

Zeigen Sie in der HTML-Vorlage die Werte und Schlüssel dieser Aufzählung an:

  <a *ngFor="let cat of fileVals()"
     (click)="addFileCategory(cat)">{{cat}}</a>
  <a *ngFor="let cat of fileKeys()"
     (click)="addFileCategory(cat)">{{cat}}</a>

mit Rohr:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'enum'
})
export class EnumSelectPipe implements PipeTransform {
  transform(value: any): [number, string][] {
    return Object.keys(value).filter(t => isNaN(+t)).map(t => [value[t], t]);
  }
}

und in der Vorlage:

<mat-select formControlName="type" placeholder="Package Type">
  <mat-option *ngFor="let pType of PackageTypes | enum" [value]="pType[0]">{{ pType[1] | title}}</mat-option>
</mat-select>

Ich empfehle Ihnen, ein generisches Pipe zu verwenden. Es ist flexibler und weniger redundant in Ihrem Code. Das Problem bei einigen früheren Aussagen ist, dass das Typoskript es Ihnen ermöglicht, eine andere Art von Aufzählung zu haben, nicht nur Zahl / Zeichenfolge.

Zum Beispiel:

export enum NotificationGrouping {
    GroupByCreatedAt = "GroupByCreatedAt", 
    GroupByCreatedByUser = "GroupByCreatedByUser", 
    GroupByEntity = "GroupByEntity", 
    GroupByAction = "GroupByAction", 
}

Hier ist meine Lösung:

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

und das HTML wird sein:

<mat-select [(ngModel)]="groupKey">
  <mat-option *ngFor="let group of notificationGrouping | enumToArray"
              [value]="group.key">
    {{ group.value }}
  </mat-option>
</mat-select>

in ts:

public notificationGrouping : NotificationGrouping

Hinweis: Es ist immer noch interessant zu sehen, wie Leute ohne Erklärung ein Minus setzen ... Für andere, die an dieser Lösung interessiert sein könnten, kann ich bestätigen, dass sie korrekt funktioniert.

ES6 unterstützt

export enum E {
    a = 'First',
    b = 'Second',
    c = 'Third'
}

let keyValueArray = Object.keys(E).map(k => ({key: k, value: E[k as any]}));

In Angular 7 wird bei Verwendung von keys () weiterhin eine Liste aller Schlüssel und Werte angezeigt.

Basierend auf den obigen Antworten verwende ich dies für eine einfache ENUM, scheint sauberer und OO:

export enum CategoryType {
    Type1,
    Type2,
    ...,
}

export namespace CategoryType {
    export function keys() {
        return Object.keys(CategoryType).filter(k => !isNaN(Number(k)));
    }
}

dann in der Vorlage:

<option *ngFor="let type of types.keys()" [value]="type">{{types[type]}}</option>

Die Funktion wird zu einem weiteren Eintrag in der Aufzählung, wird jedoch wie die anderen Nicht-Zahlen herausgefiltert.