web-dev-qa-db-fra.com

Impossible d'approcher l'énumération TypeScript en HTML

J'ai créé une énumération avec TypeScript à 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'énumération pour une comparaison dans mon code HTML à l'aide de 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 est compilé mais le navigateur me donne une erreur:

Impossible de lire la propriété d'undefined

enter image description here

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

enter image description here

Est-ce que quelqu'un sait pourquoi l'énum ne peut pas être approché comme ça?

htmlangulartypescriptenums
40
Klyner

La portée du modèle est limitée aux membres d'instance de composant. Si vous voulez faire référence à quelque chose, il doit être disponible ici

class MyComponent {
  get connectionResult() { return ConnectionResult; }
}

alors vous pouvez utiliser

*ngIf="connectionResult.Success"

Voir aussi Variables globales d'accès Angular2 à partir d'un modèle HTML

72
Günter Zöchbauer

Vous devrez l'écrire de la manière suivante en .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. :)

18
Nikhil Manapure

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

enum Quarters{ Q1, Q2, Q3, Q4}

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

Dans votre template

<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 essentiellement de ce type:

TileType: typeof TileType
4
Ondrej Peterka