HTML 내의 형식 스크립트 열거에 접근할 수 없습니다.

HTML 내의 형식 스크립트 열거에 접근할 수 없습니다.

My Service에서 사용할 Typescript로 열거했습니다.service.ts MyComponent.component.ts 및 MyComponent.component.html을 지정합니다.

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

또한 HTML 내에서 *ngIf 문을 사용하여 비교하기 위해 열거형을 사용하려고 합니다.

<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 표시 에러 행이 표시됩니다.

왜 열거형에 이렇게 접근할 수 없는지 아는 사람?

템플릿의 범위는 구성 요소 인스턴스 멤버로 제한됩니다.참조하고 싶은 것이 있으면, 거기서 입수할 수 있을 필요가 있습니다.

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

HTML에서 사용할 수 있게 되었습니다.

*ngIf="connectionResult.Success"

HTML 템플릿에서 Angular2 액세스 글로벌 변수 참조

다음 방법으로 작성해야 합니다..ts파일.

enum Tenure { day, week, all }

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

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

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

이제 좀 더 명확해졌으면 좋겠다.:)

컴포넌트에 열거형을 속성으로 추가하고 템플릿에서 열거형(사분위)의 동일한 이름을 사용할 수 있습니다.

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters //here you are creating a variable/alias to the enum
}

템플릿 내

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

이것이 동작하는 이유는 새로운 porperty가 기본적으로 다음과 같은 유형이기 때문입니다.

TileType: typeof TileType

import MyEnum from enums;  

......변수를 선언합니다......

public myEnum = MyEnum;

및 html 사용:

<div *ngIf="xxx === myEnum.DATA"> ... </div>

서비스 중

export enum ConnectionResult {
    Success,
    Failed     
}

TypeScript 파일의 변수에 열거형 할당

ConnectionResult = ConnectionResult; 

그런 다음 HTML에서 Enum을 읽습니다.

*ngIf="result == ConnectionResult.Success"

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

  export enum SomeEnum {
      Failure = "Failure",
      Success = "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">

언급URL : https://stackoverflow.com/questions/44045311/cannot-approach-typescript-enum-within-html