Не вдається наблизити перелік Typescript у HTML

Я створив перерахування за допомогою Typescript для використання в MyService.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>

Код компілюється, але браузер видає мені помилку:

Не вдається прочитати властивість undefined

З таким рядком помилки індикації html:

Хтось знає, чому до переліку не можна підходити так?

Сфера застосування шаблону обмежена членами екземпляра компонента. Якщо ви хочете посилатися на щось, воно повинно бути там

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

Тепер ви можете використовувати HTML-код

*ngIf="connectionResult.Success"

Див. Також глобальні змінні Angular2 для доступу до шаблону HTML

Вам доведеться записати це наступним чином у .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
}

У вашому шаблоні

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

Причина, по якій це працює, полягає в тому, що нова портовість в основному має такий тип:

TileType: typeof TileType

Ви можете прив’язати як текст, якщо перелічення визначено, як показано нижче (ці значення не застосовуватимуть значення рядка json, що надходить з API)

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