Comment puis-je utiliser Enums dans le modèle Angular 8?
component.ts
<span *ngIf="name === SomeEnum.someValue">This has some value</value>
component.html
import { Component } from '@angular/core';
import { SomeEnum } from './global';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = SomeEnum.someValue;
}
Cela ne fonctionne pas actuellement, car le modèle n'a aucune référence à SomeEnum . Comment puis-je le résoudre?
ERROR Error: Cannot read property 'someValue' of undefined
4 Réponses :
Vous devrez d'abord le déclarer comme propriété:
<span *ngIf="name === importedSomeEnum.someValue">This has some value</span>
Et puis utilisez-le dans le modèle:
import { Component } from '@angular/core';
import { SomeEnum } from './global';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = SomeEnum.someValue;
importedSomeEnum = SomeEnum;
}
Voici une démonstration de travail pour votre réf.
Vous pouvez déclarer un champ égal à l'énumération SomeEnum (il peut être importé d'un autre fichier) en tant que champ de classe publique dans le fichier de composant. Ensuite, il sera accessible dans le modèle.
// component
export class AppComponent {
name = SomeEnum.someValue;
enum = SomeEnum;
}
// template
<span *ngIf="name === enum.someValue">This has some value</value>
Si l'énumération est utilisable ailleurs, il serait préférable de l'avoir dans un fichier séparé. Et puis simplement l'importer dans le composant en tant que propriété.
Oui, c'est ce que je voulais dire. Vous n'avez pas à déclarer l'énumération dans le même fichier que le composant. J'ai modifié ma réponse.
dans le TS
*ngIf="SomeEnum.someValue === 'abc'"
dans l'utilisation HTML
public get SomeEnum() {
return SomeEnum;
}
Wow, c'est probablement la façon la plus propre de le faire. Aimez votre réponse.
Il n'est cependant pas recommandé d'utiliser get ters. Ils coûtent beaucoup de performances. Ainsi, la fonction get ter s'exécute chaque fois qu'Angular effectue une détection de changement. Maintenant, je ne dis pas que le simple fait d'exécuter cette fonction coûtera des performances. Mais cette pièce laisse place à quelqu'un d'ajouter une certaine logique dans ce get ter qui pourrait entraîner des problèmes de performances. Juste dire. 🤷
@SiddAjmera Je ne connais pas ce problème de performances, pouvez-vous nous montrer une source de recherche à ce sujet? J'utilise ceci pour les Enums car ils ont l'air plus propres dans le code. Merci!
Ummmm. Bien. Il suffit de placer un console.log dans le get ter et placer une entrée dans votre modèle avec un [(ngModel)] Ou il suffit d' exécuter cette StackBlitz voir la console :)
Ceci est déclenché par le ngIf , pas par le getter lui-même. ngIf regarde aussi les variables, mais vous ne pouvez pas les consoler hahaha.
Oui, mais l'essentiel ici est que c'est une syntaxe de liaison de données. Vous verrez cela se produire si vous l'utilisez dans une syntaxe d'interpolation de chaîne / de liaison de propriété / de liaison d'événement.
Toutes ces solutions ne sont pas propres à 100% et c'est probablement quelque chose qui vaut la peine de faire une demande de fonctionnalité pour cela, car il n'a actuellement pas de vraie solution native pour cela.
Pour référence future, il existe déjà une demande de fonctionnalité ouverte dans le référentiel officiel: github.com/angular/angular/issues/33652
Oui, le modèle ne peut pas faire référence directement à l'énumération. Il y a plusieurs façons de faire cela. 1. Ajoutez une référence Enum au fichier ts du composant comme ci-dessous
<span *ngIf="name === someEnum.someValue">This has some value</value>
alors vous pourrez utiliser la référence dans votre modèle comme ceci
someEnum = SomeEnum;
<span *ngIf="checkCondition(name)">This has some value</value>
Qu'entendez-vous exactement par «ne fonctionne pas»?
ERREUR Erreur: impossible de lire la propriété 'someValue' sur undefined
avez-vous essayé de créer un
public get SomeEnum() {return SomeEnum; }dans le TS puis dans le HTML, utilisezngIf="SomeEnum.someValue"Pour référence future, il existe déjà une demande de fonctionnalité ouverte dans le référentiel officiel: github.com/angular/angular/issues/33652