Невозможно подойти к перечислению 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:

Кто-нибудь знает, почему к enum нельзя так подходить?

Область действия шаблона ограничена членами экземпляра компонента. Если вы хотите сослаться на что-то, это должно быть там

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"

Надеюсь, теперь стало понятнее. :)

Вы можете просто добавить перечисление в свой компонент как свойство и использовать то же имя перечисления (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

Вы можете привязать как текст, если перечисление определено, как показано ниже (эти значения не будут обеспечивать строковое значение 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">