Typescript-Aufzählung in HTML kann nicht angegangen werden

Ich habe eine Aufzählung mit Typescript erstellt, die in MyService.service.ts MyComponent.component.ts und MyComponent.component.html verwendet werden soll.

export enum ConnectionResult {
    Success,
    Failed     
}

Ich kann eine definierte Enum-Variable leicht von MyService.service.ts abrufen und vergleichen:

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

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

Ich wollte die Aufzählung auch für einen Vergleich in meinem HTML-Code mit der Anweisung * ngIf verwenden:

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

Der Code wird kompiliert, aber der Browser gibt mir einen Fehler:

Eigenschaft von undefined kann nicht gelesen werden

Mit der folgenden HTML-Anzeigefehlerzeile:

Weiß jemand, warum die Aufzählung nicht so angegangen werden kann?

Der Umfang der Vorlage ist auf die Komponenteninstanzmitglieder beschränkt. Wenn Sie sich auf etwas beziehen möchten, muss es dort verfügbar sein

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

Im HTML können Sie jetzt verwenden

*ngIf="connectionResult.Success"

Siehe auch Angular2 greift über eine HTML-Vorlage auf globale Variablen zu

Sie müssen es wie folgt in eine .tsDatei schreiben .

enum Tenure { day, week, all }

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

Und jetzt in HTML können Sie dies wie verwenden

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

Ich hoffe es ist jetzt klarer. :) :)

Sie können die Komponente einfach als Eigenschaft zu Ihrer Komponente hinzufügen und in Ihren Vorlagen denselben Namen wie die Aufzählung (Quartale) verwenden:

enum Quarters{ Q1, Q2, Q3, Q4}

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

In Ihrer Vorlage

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

Der Grund, warum dies funktioniert, ist, dass das neue Porperty im Grunde genommen von diesem Typ ist:

TileType: typeof TileType

Sie können als Text binden, wenn die Enumeration wie folgt definiert ist (diese Werte erzwingen keinen von der API stammenden JSON-Zeichenfolgenwert).

  export enum SomeEnum {
      Failure,
      Success,
  }

In der .ts-Datei

public status: SomeEnum;

In .html

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

Eine andere Möglichkeit, die in Angular 8+ getestet wurde, besteht darin, Aufzählungen mit Zahlen zu erstellen

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

In der .ts-Datei

public status: SomeEnum;

In .html

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