ngFor를 사용하여 문자열 배열로 Typescript Enum을 반복하려면 어떻게 해야 합니까?

ngFor를 사용하여 문자열 배열로 Typescript Enum을 반복하려면 어떻게 해야 합니까?

Angular2 및 TypeScript를 사용하고 있으며 다음과 같은 항목이 있습니다.

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

*ngFor를 사용하여 열거에 대해 반복하려고 합니다.이것을 하는 가장 좋은 방법은 무엇인가요?파이프를 작성해야 합니까?아니면 더 간단한 방법은 없나요?

Angular 6.1에 소개된 "keyvalue" 파이프를 사용하면 됩니다.

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

전체 예제는 여기를 참조하십시오. -> https://stackblitz.com/edit/angular-gujg2e

열거형은 개체일 뿐입니다.

열거형은 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);파이프에서요

템플릿의 범위는 구성 요소 인스턴스입니다.이 범위를 벗어나는 항목에 액세스하려면 구성 요소 인스턴스를 사용하여 이 항목을 사용할 수 있도록 해야 합니다.

열거 키가 0으로 시작되지 않는 경우에도 이 방법이 작동합니다.

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

https://stackoverflow.com/a/35750252/217408을 참조하십시오.

저도 같은 일을 해야 했고 아마 이게 당신이 원했던 것일 거예요.
더 드라이하고 함께 사용할 수 있습니다.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는 다음과 같습니다. Enumhttps://basarat.gitbooks.io/typescript/content/docs/enums.html에 함수를 추가합니다(enums 장의 끝에 있음).

다른 답변에 대한 추가 조사 및 검토 후 이제 질문에 대한 답변을 작성할 수 있습니다.구성 요소에서 일부 코드를 지원하지 않고 *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;
  }
}

파이프를 사용합니다.

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

템플릿에서 다음을 수행합니다.

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

다음과 같은 항목이 있습니다.

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>

ES6가 지원됩니다.

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

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

일반 파이프를 사용하는 것이 좋습니다. 그러면 코드에서 유연성이 향상되고 중복성이 줄어듭니다.일부 이전 명제의 문제는 타이프스크립트를 통해 숫자/문자열뿐만 아니라 다른 종류의 열거형을 가질 수 있다는 것입니다.

예를 들어 다음과 같습니다.

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>

단위는 다음과 같습니다.

public notificationGrouping : NotificationGrouping

참고: 설명 없이 마이너스 표시를 하는 사람들을 보는 것은 여전히 흥미롭습니다.이 솔루션에 관심이 있을 수 있는 다른 사용자를 위해 올바르게 작동하는지 확인할 수 있습니다.

Angular 7에서는 키를 사용할 때 모든 키와 값의 목록을 계속 가져옵니다().

위의 답변에 따르면 간단한 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>

함수는 열거형에서 다른 항목이 되지만 숫자가 아닌 다른 항목과 마찬가지로 필터링됩니다.

 fillKeysValueFromEnum<T>(type:T){
    return Object.keys(type).filter(t => isNaN(+t)).map(el => {
       return {
         key: el,
         value: Object(type)[el]
       }
     });
  }

그리고나서

fillKeysValueFromEnum(ENUM_HERE)

나는 그것에 매우 늦었고 내 답변이 문제를 직접적으로 해결하지는 못할 수도 있지만 그것은 일을 끝냅니다.오늘 우연히 같은 문제를 중심으로 한 질문,즉 반복적인 질문, 즉 반복하다, '반복하다', '반복하다', '반복하다', '반복하다'를 발견했습니다.enum요.

다음을 만들기 시작했습니다.object대신 쓰세요.enum요.

export const Roles= {
    0: "ServiceAdmin", 1: "CompanyAdmin", 2: "Foreman", 3: "AgentForeman", 
    4: "CrewMember", 5: "AgentCrewMember", 6: "Customer"
}

다음과 같이 반복해서 사용합니다.

let Number=Number; 
let roles= Roles; // in .ts file
<select>
    <option *ngFor="let role of roles | keyvalue" [value]="Number({{role.key}})">
        {{role.value}}
    </option>
</select>

값을 구문 분석하려면 다음과 같이 사용합니다.

let selectedRoleValue= 4; 
let Roles= Roles; // in .ts file

<div>{{Roles[selectedRoleValue]}}</div>

표시됩니다.

승무원입니다.

언급URL : https://stackoverflow.com/questions/38554562/how-can-i-use-ngfor-to-iterate-over-typescript-enum-as-an-array-of-strings 입니다.