Nie można podejść do wyliczenia Typescript w HTML

Zrobiłem wyliczenie z Typescript do użycia w MyService.service.ts MyComponent.component.ts i MyComponent.component.html.

export enum ConnectionResult {
    Success,
    Failed     
}

Mogę łatwo pobrać i porównać zdefiniowaną zmienną wyliczenia z MyService.service.ts:

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

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

Chciałem również użyć wyliczenia do porównania w moim kodzie HTML za pomocą instrukcji * 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>

Kod kompiluje się, ale przeglądarka wyświetla błąd:

Nie można odczytać właściwości undefined

Z następującą linią błędu wskazania HTML:

Czy ktoś wie, dlaczego do wyliczenia nie można podejść w ten sposób?

Zakres szablonu jest ograniczony do elementów składowych instancji. Jeśli chcesz się do czegoś odnieść, to musi być tam dostępne

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

W HTML możesz teraz użyć

*ngIf="connectionResult.Success"

Zobacz także Angular2 dostęp do zmiennych globalnych z szablonu HTML

Będziesz musiał zapisać to w następujący sposób w .tspliku.

enum Tenure { day, week, all }

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

A teraz w html możesz używać tego jak

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

Mam nadzieję, że teraz jest to bardziej jasne. :)

Możesz po prostu dodać wyliczenie do swojego składnika jako właściwość i użyć tej samej nazwy wyliczenia (kwartały) w swoich szablonach:

enum Quarters{ Q1, Q2, Q3, Q4}

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

W Twoim szablonie

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

Powodem, dla którego to działa, jest to, że nowa porcja jest w zasadzie tego typu:

TileType: typeof TileType

Możesz powiązać jako tekst, jeśli wyliczenie zdefiniowane jak poniżej (te wartości nie będą wymuszać wartości ciągu json pochodzącej z interfejsu API)

  export enum SomeEnum {
      Failure,
      Success,
  }

W pliku .ts

public status: SomeEnum;

W .html

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

Innym sposobem testowanym w Angular 8+ jest tworzenie wyliczeń z liczbami

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

W pliku .ts

public status: SomeEnum;

W .html

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