Impossible d'approcher l'enum Typescript dans le HTML

Question

J'ai créé un enum avec Typescript pour l'utiliser dans MyService.service.ts MyComponent.component.ts et MyComponent.component.html.

export enum ConnectionResult {
    Success,
    Failed     
}

Je peux facilement obtenir et comparer une variable enum définie à partir de MyService.service.ts :

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

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

Je voulais également utiliser l'enum pour une comparaison dans mon HTML en utilisant l'instruction *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>

Le code se compile mais le navigateur me donne une erreur :

Impossible de lire la propriété de l'indéfini

Avec la ligne d'erreur d'indication html suivante :

Quelqu'un sait-il pourquoi l'enum ne peut pas être abordé de cette manière ?

Answer 1

La portée du modèle est limitée aux membres de l'instance du composant. Si vous voulez faire référence à un élément, il doit être disponible à cet endroit.

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

Dans le HTML, vous pouvez maintenant utiliser

*ngIf="connectionResult.Success"

Voir aussi Angular2 accède aux variables globales à partir d'un modèle HTML

Answer 2

Vous devrez l'écrire de la manière suivante dans .ts fichier.

enum Tenure { day, week, all }

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

Et maintenant en html vous pouvez utiliser ceci comme

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

J'espère que c'est plus clair maintenant. :)

Answer 3

Vous pouvez simplement ajouter l'enum à votre composant comme propriété et utiliser le même nom de l'enum (Quarters) dans vos modèles :

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters //here you are creating a variable/alias to the enum
}

Dans votre modèle

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

La raison pour laquelle cela fonctionne est que la nouvelle propriété est fondamentalement de ce type :

TileType: typeof TileType

Answer 4

import MyEnum from enums;  

.... Déclarer var ....

public myEnum = MyEnum;

et en utilisation html :

<div *ngIf="xxx === myEnum.DATA"> ... </div>

Answer 5

Vous pouvez lier en tant que texte si l'enum est défini comme ci-dessous (ces valeurs n'appliqueront pas une valeur de chaîne json provenant de l'API).

  export enum SomeEnum {
      Failure = "Failure",
      Success = "Success",
  }

Dans le fichier .ts

public status: SomeEnum;

En .html

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

Une autre méthode, testée dans Angular 8+, consiste à utiliser des enums avec des nombres.

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

Dans le fichier .ts

public status: SomeEnum;

En .html

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