7
votes

Angular2 - Comment utiliser les énumérations de chaînes avec * ngIf

Comment puis-je passer enum à une fonction lorsque j'utilise * ngIf dans Angular?

J'ai le code suivant:

<div id="adminDiv" *ngIf="hasAccess('Admin')">
</div>

fonction du composant

public hasAccess(role: RoleType) {
   //check role type and return true or false
}

composant html

export enum RoleType {
    User='User',
    Admin='Admin'
}

typescript angular enums angular7

7 commentaires

hasAccess (RoleType.Admin) , et notez que si vous souhaitez utiliser cette énumération dans le modèle, vous devez l'attribuer à une propriété publique comme RoleType = RoleType .

essayé - je n'aime pas ça ...

Pourquoi coder en dur un paramètre dans le modèle? Créez simplement une fonction qui vérifie si l'utilisateur est un administrateur.

@Buczkowski Vous pouvez peut-être répondre à cette question par un exemple, car c'est une assez bonne alternative.

@Silvermind veben vient de le faire.

@Hypenate Non, il ne l'a pas fait, vous interprétez mal le commentaire de Buczkowski. C'est pourquoi je lui ai suggéré de créer une réponse.

Double possible de Comment accéder à une constante dans un composant et un service Angular 2?

6 Réponses :

2
votes

Récupérez-le sous forme de chaîne, puis convertissez-le en RoleType.

public hasAccess(role: string): boolean {
const roleAsEnum: RoleType = RoleType[role];

return ...
}

2 commentaires

Merci pour la solution. Mais cela ne rend-il pas simplement l'énumération redondante alors ??

Je suppose que ce serait :) Je pencherais davantage vers l'idée de R. Richards.

0
votes

L'erreur apparaît car vous passez String alors qu'une énumération est attendue. Comme d'autres l'ont suggéré, il existe plusieurs façons de le gérer et l'une d'entre elles est:

  private hasRole(role: string) {
    console.log(role == RoleType.admin);
    console.log(role == RoleType.user);
  }

0 commentaires

2
votes

Vous ne devez pas utiliser de fonction avec paramètre dans le modèle, mais faire quelque chose comme ça:

Déclarez un var isAdmin dans votre fichier .ts et initialisez-le à la création du composant, vérifier si l'utilisateur est administrateur:

<div id="adminDiv" *ngIf="isAdmin">
</div>

Utilisez-le dans le *ngIf:

isAdmin = false;
ngOnInit() {
    this.isAdmin = this.checkIfUserAdmin(...)
}

0 commentaires

15
votes

Comme @Buczkowski l'a suggéré, vous pouvez le faire comme ceci:

<div id="adminDiv" *ngIf="hasAccess(RoleType.Admin)">
</div>

composant

RoleType = RoleType; // This way you can access its properties from the template.

public hasAccess(role: RoleType) {
    //check role type and return true or false
}

composant html

export enum RoleType {
    User = 'User',
    Admin = 'Admin'
}

Exemple de StackBlitz

0 commentaires

2
votes

vous pouvez utiliser une autre variable, quelque chose comme AdminTest dans votre fichier .ts, et lui attribuer une valeur au hook ngOnInit .

vous devriez avoir quelque chose comme:

<div id="adminDiv" *ngIf="AdminTest"></div>

.html :

AdminTest = false;

ngOnInit() {
    this.AdminTest = this.checkRole()
}

checkRole() {
    // ...
}

2 commentaires

Vous avez ajouté une réponse similaire à la réponse de @ veben

oui je suppose que nous étions tous. d'accord, je n'ai pas vu sa réponse avant

4
votes

Voici une manière beaucoup plus propre de procéder. Faites ce qui suit dans votre component.ts

*ngIf="role===allRoleTypes.User"

et dans votre html

allRoleTypes = RoleType;

Vous n'avez pas besoin d'écrire de méthode.

0 commentaires