Impossible d'approcher l'énumération Typescript dans HTML

86

J'ai fait 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 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é non définie

entrez la description de l'image ici

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

entrez la description de l'image ici

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

Klyner
la source

Réponses:

152

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

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

Dans le HTML, vous pouvez maintenant utiliser

*ngIf="connectionResult.Success"

Voir aussi Angular2 accéder aux variables globales à partir du modèle HTML

Günter Zöchbauer
la source
1
Puisque je suis strictement les normes de codage, quel type de données, je dois donner pour la connexionRésultat
Nasrul Bharathi
Je ne sais pas. Je n'ai utilisé que TypeScript dans Plunker et il n'y avait pas de vérification de type. Je m'attendrais à ce que le message d'erreur vous indique le type attendu lorsque vous en utilisez un incompatible, n'est-ce pas?
Günter Zöchbauer
Merci, permettez-moi de démarrer une nouvelle conversation dans le débordement de pile
Nasrul Bharathi
1
Oui, un simple membre de propriété ne fonctionnait pas pour moi, mais le définir comme un getter fonctionnait.
Kon
1
Pas comme dans une autre réponse que vous pouvez garder le nom. (pourrait créer d'autres problèmes, ceux que je n'ai pas encore découverts)
LosManos
49

Vous devrez l'écrire de la manière suivante dans le .tsfichier.

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. :)

Nikhil Manapure
la source
3
N'oubliez pas d'utiliser '=' et non ':', entre TenureType et Tenure, c'est-à-dire attribuer le type ne le définissez pas. Je viens de faire cette erreur en oubliant ce que @Nikhil avait écrit. +1
Jacques
26

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

enum Quarters{ Q1, Q2, Q3, Q4}

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

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

TileType: typeof TileType
Ondrej Peterka
la source
Si vous souhaitez afficher le nom de l'énumération, comme dans a divou, mat-iconvous devez référencer l'énumération, et non directement l'élément. Plus facile à montrer qu'à expliquer:<mat-icon svgIcon="{{Quarters[Quarters.Q1]}}"></mat-icon>
LosManos le
c'est certainement le moyen le plus propre
d3vtoolsmith
0

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

  export enum SomeEnum {
      Failure,
      Success,
  }

Dans le fichier .ts

public status: SomeEnum;

En .html

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

Une autre façon, testée dans Angular 8+, consiste à avoir des énumérations avec des nombres

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

Dans le fichier .ts

public status: SomeEnum;

En .html

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

Pawel Cioch
la source
Je crois que toutes les énumérations sont automatiquement accompagnées de chiffres
super informaticien il y a