*ngIf에 대해 Angular 8 HTML 템플릿에서 Enum 사용

*ngIf에 대해 Angular 8 HTML 템플릿에서 Enum 사용

Angular 8 템플릿에서 Enums를 사용하려면 어떻게 해야 합니까?

component.ts

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
}

성분.

<span *ngIf="name === SomeEnum.someValue">This has some value</value>

템플릿에 다음에 대한 참조가 없으므로 현재 작동하지 않습니다.SomeEnum. 어떻게 해결해야 합니까?

ERROR Error: Cannot read property 'someValue' of undefined

시험관에서

import { SomeEnum } from 'path-to-file';

public get SomeEnum() {
  return SomeEnum; 
}

HTML로

*ngIf="SomeEnum.someValue === 'abc'"

---

편집: 시간이 흘러 개발자로서 더 많은 것을 배우고 있습니다. 지금 제가 사용하고 있는 접근 방식은get방법.두 가지 솔루션 모두 효과가 있으므로 가장 마음에 드는 솔루션을 선택하면 됩니다.

시험관에서

import { SomeEnum } from 'path-to-file';

export class ClassName {
  readonly SomeEnum = SomeEnum;
}

HTML로

*ngIf="SomeEnum.someValue === 'abc'"

먼저 재산으로 신고해야 합니다.

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
  importedSomeEnum = SomeEnum;
}

그런 다음 템플릿에 사용합니다.

<span *ngIf="name === importedSomeEnum.someValue">This has some value</span>

---

여기 참조를 위한 작업 데모가 있습니다.

불필요한 논리로 수업을 부풀리고 싶지 않다면 이것이 더 간단한 해결책 중 하나가 될 것이라고 생각합니다.열거를 반환하는 함수를 호출하는 것은 피할 것입니다. 왜냐하면 열거는 모든 재렌더에서 호출되고 이것이 많이 사용될 경우 성능에 영향을 미칠 것이기 때문입니다.

public readonly myEnum : typeof MyEnum = MyEnum;

다음과 같은 필드를 선언할 수 있습니다.SomeEnumenum(다른 파일에서 가져올 수 있음)은 구성 요소 파일의 공용 클래스 필드입니다.그러면 템플릿에서 액세스할 수 있습니다.

// component 
export class AppComponent  {
  name = SomeEnum.someValue;
  enum = SomeEnum;
}

// template
<span *ngIf="name === enum.someValue">This has some value</value>

예, 템플릿이 열거형을 직접 참조할 수 없습니다.이를 위한 몇 가지 방법이 있습니다. 1. 아래와 같이 구성 요소 ts 파일에 Enum 참조를 추가합니다.

someEnum = SomeEnum;

그러면 당신은 당신의 템플릿에 이렇게 레퍼런스를 사용할 수 있을 것입니다.

<span *ngIf="name === someEnum.someValue">This has some value</value>

2. 두번째 방법은 이름을 매개변수로 템플릿에서 함수를 호출하여 타이프스크립트 파일에서 비교하는 것입니다.

<span *ngIf="checkCondition(name)">This has some value</value>

이 열거형을 많은 구성요소에 사용할 계획이라면 Pipe를 사용하는 것이 좋습니다.

import { Pipe, PipeTransform } from '@angular/core';
import { SomeEnum } from 'path/to/some-enum.enum';

@Pipe({
    name: 'compareToSomeEnum',
})
export class CompareToSomeEnumPipe implements PipeTransform {
    transform(
        value: SomeEnum,
        compareTo: keyof SomeEnum,
    ): boolean {
        return value === SomeEnum[compareTo];
    }
}

다음과 같은 템플릿에 사용합니다.

<span *ngIf="name | compareToSomeEnum : 'someValue'">This has some value</span>

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/59289095/use-of-enums-in-angular-8-html-template-for-ngif