Impossibile accedere all'enumerazione Typescript in HTML

Ho creato un'enumerazione con Typescript da utilizzare in MyService.service.ts MyComponent.component.ts e MyComponent.component.html.

export enum ConnectionResult {
    Success,
    Failed     
}

Posso facilmente ottenere e confrontare una variabile enum definita da MyService.service.ts:

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

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

Volevo anche usare l'enumerazione per un confronto all'interno del mio HTML usando l'istruzione * 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>

Il codice si compila ma il browser mi dà un errore:

Impossibile leggere la proprietà di undefined

Con la seguente riga di errore di indicazione html:

Qualcuno sa perché l'enum non può essere affrontato in questo modo?

L'ambito del modello è limitato ai membri dell'istanza del componente. Se vuoi fare riferimento a qualcosa, deve essere disponibile lì

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

Nell'HTML puoi ora usare

*ngIf="connectionResult.Success"

Vedi anche Angular2 accedi alle variabili globali dal template HTML

Dovrai scriverlo nel seguente modo in .tsfile.

enum Tenure { day, week, all }

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

E ora in html puoi usare questo come

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

Spero sia più chiaro ora. :)

Puoi semplicemente aggiungere l'enumerazione al tuo componente come proprietà e usare lo stesso nome dell'enumerazione (Quarters) nei tuoi modelli:

enum Quarters{ Q1, Q2, Q3, Q4}

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

Nel tuo modello

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

Il motivo per cui funziona è che la nuova proprietà è fondamentalmente di questo tipo:

TileType: typeof TileType

Puoi eseguire il binding come testo se enum definito come di seguito (quei valori non applicano un valore di stringa json proveniente dall'API)

  export enum SomeEnum {
      Failure,
      Success,
  }

Nel file .ts

public status: SomeEnum;

In .html

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

Un altro modo, testato in Angular 8+, è avere enumerazioni con numeri

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

Nel file .ts

public status: SomeEnum;

In .html

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