HTML 내에서 Typescript 열거 형에 접근 할 수 없습니다.


87

MyService.service.ts MyComponent.component.ts 및 MyComponent.component.html에서 사용할 Typescript로 열거 형을 만들었습니다.

export enum ConnectionResult {
    Success,
    Failed     
}

MyService.service.ts에서 정의 된 열거 형 변수를 쉽게 얻고 비교할 수 있습니다.

this.result = this.myService.getConnectionResult();

switch(this.result)  
{
    case ConnectionResult.Failed:
         doSomething();
         break;
    case ConnectionResult.Success:
         doSomething();
         break;
}

또한 * ngIf 문을 사용하여 HTML 내에서 비교를 위해 열거 형을 사용하고 싶었습니다.

<div *ngIf="result == ConnectionResult.Success; else failed">
            <img src="../../assets/connection-success.png" height="300px" class="image-sign-style" />
</div>
<ng-template #failed>
       <img src="../../assets/connection-failed.png" height="300px" class="image-sign-style" />
</ng-template>

코드가 컴파일되지만 브라우저에서 오류가 발생합니다.

정의되지 않은 속성을 읽을 수 없습니다.

여기에 이미지 설명 입력

다음 html 표시 오류 라인 :

여기에 이미지 설명 입력

열거 형에 이와 같이 접근 할 수없는 이유를 아는 사람이 있습니까?

답변:


157

템플릿의 범위는 구성 요소 인스턴스 멤버로 제한됩니다. 무언가를 참조하려면 거기에서 사용할 수 있어야합니다.

class MyComponent {
  public get connectionResult(): typeof ConnectionResult {
    return ConnectionResult; 
  }
}

HTML에서 이제 사용할 수 있습니다.

*ngIf="connectionResult.Success"

참조 HTML 템플릿에서 Angular2 액세스 전역 변수를


1
나는 코딩 표준, 어떤 데이터 유형을 엄격히 따르고 있기 때문에 connectionResult
Nasrul Bharathi

모르겠어요. Plunker에서 TypeScript 만 사용했으며 유형 검사가 없었습니다. 호환되지 않는 유형을 사용할 때 오류 메시지가 예상 유형을 알려줄 것으로 예상합니다.
Günter Zöchbauer

덕분에, 내가 스택 오버 플로우의 새로운 대화를 시작하자
Nasrul Bharathi

1
예, 평범한 부동산 구성원이 저에게 효과가 없었지만 getter로 설정하면 효과가 있습니다.
Kon

1
이름을 유지할 수 있는 다른 답변 과는 다릅니다. (아직,하지만 내가 발견하지 않은 사람을 다른 문제를 만들 수 있습니다)
LosManos

51

.ts파일에 다음과 같은 방식으로 작성해야 합니다.

enum Tenure { day, week, all }

export class AppComponent {
    tenure = Tenure.day
    TenureType = Tenure
}

이제 html에서 다음과 같이 사용할 수 있습니다.

*ngIf = "tenure == TenureType.day ? selectedStyle : unSelectedStyle"

이제 더 명확 해 졌으면합니다. :)


3
TenureType과 Tenure 사이에 ':'이 아닌 '='를 사용하는 것을 잊지 마십시오. 즉, 유형을 지정하지 마십시오. @Nikhil이 작성한 것을 간과하여 실수를 저질렀습니다. +1
Jacques

28

열거 형을 속성으로 구성 요소에 추가하고 템플릿에서 동일한 이름 의 열거 형 (Quarters)을 사용할 수 있습니다.

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters
}

템플릿에서

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div> 

이것이 작동하는 이유는 새로운 속성이 기본적으로 다음 유형이기 때문입니다.

TileType: typeof TileType

당신이 출력에처럼 열거의 이름을 원하는 경우 div또는 mat-icon당신은 열거를 참조해야하고, 직접이 아닌 항목을 선택합니다. 쉽게 설명하기보다 보여 :<mat-icon svgIcon="{{Quarters[Quarters.Q1]}}"></mat-icon>
LosManos

이것은 확실히 가장 깨끗한 방법입니다
d3vtoolsmith

0

enum이 아래와 같이 정의 된 경우 텍스트로 바인딩 할 수 있습니다 (이러한 값은 API에서 오는 json 문자열 값을 적용하지 않습니다).

  export enum SomeEnum {
      Failure,
      Success,
  }

.ts 파일에서

public status: SomeEnum;

.html에서

<div *ngIf="status == 'Success'">

Angular 8+에서 테스트 한 또 다른 방법은 숫자가있는 열거 형을 갖는 것입니다.

  export enum SomeEnum {
      Failure = 0,
      Success = 1,
  }

.ts 파일에서

public status: SomeEnum;

.html에서

<div *ngIf="status == 1">


모든 열거 형은 자동으로 숫자와 함께 제공된다고 생각합니다
super IT guy

원하는 것을 믿을 수 있지만 테스트하여 두 가지 접근 방식을 제공했습니다. 따라서 숫자를 지정하지 않으면 C #에서와 같이 숫자가 제공되지 않습니다. 이 동작은 TypeScript 버전 (+ 아마도 Angular frx 버전)에 따라 달라질 수 있습니다
Pawel Cioch

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.