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
Avec la ligne d'erreur d'indication HTML suivante:
Est-ce que quelqu'un sait pourquoi l'énumération ne peut pas être abordée comme ça?
la source
Vous devrez l'écrire de la manière suivante dans le
.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. :)
la source
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
la source
div
ou,mat-icon
vous 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>
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">
la source