web-dev-qa-db-fra.com

Angular 2- en utilisant * ngIf avec plusieurs conditions

Je ne parviens pas à afficher de manière sélective les liens sur ma barre de navigation. En fonction de qui se connecte (utilisateur ou administrateur), je souhaite modifier le lien affiché sur ma barre de navigation.

Vous trouverez ci-dessous le code d'une telle instance où l'utilisateur/l'administrateur se déconnecte.

Dans navbar.component.html -

<li *ngIf="authService.userLoggedIn()== true && authService.adminLoggedIn() == false" 
       [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
  <a (click)="onUserLogoutClick()" href="#">Logout</a>
</li>

<li *ngIf="(authService.adminLoggedIn() == true) && (authService.userLoggedIn() == false)" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
   <a (click)="onAdminLogoutClick()" href="#">Logout</a>
</li>

authService.adminLoggedIn() et authService.userLoggedIn() retournent tokenNotExpired;

Ci-dessous le code pertinent dans le navbar.component.ts -

 onUserLogoutClick() {
   this.authService.userLogout();
   this.flashMessage.show('You are now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/login']);
   return false;   
 }

 onAdminLogoutClick() {
   this.authService.adminLogout();
   this.flashMessage.show('Administrator now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/admin']);
   return false;   
 }

Les authService.adminLogout() et authService.userLogout() effacent simplement le jeton stocké dans la mémoire locale.

Je m'excuse par avance si l'erreur que j'ai commise est stupide. Je suis nouveau à Angular.

angularangular-ng-if
14
Shakir Jameel

Vous pouvez déplacer ces conditions multilignes et conditions complexes vers votre méthode de composant, comme indiqué ci-dessous.

showLogout(){
    if(this.authService.userLoggedIn()== true && this.authService.adminLoggedIn() == false)
        return true;
    else
        return false;
}

En outre, comme angular4 a *ngIf and else vous pouvez l'utiliser comme

 <div *ngIf="showLogout();then userLogout else adminlogout"></div>

<ng-template #userLogout><a (click)="onUserLogoutClick()" href="#">Logout</a></li></ng-template>
<ng-template #adminlogout><a (click)="onAdminLogoutClick()" href="#">Logout</a></li></ng-template>
22
Aravind

dans votre expression, authService.userLoggedIn () ou authService.adminLoggedIn () ne tiendrait pas votre modèle au courant des noms des personnes connectées, car votre fonction n'est invoquée qu'une seule fois.

Essayez de les rendre getter à votre service:

  get userLoggedIn(): boolean {
    return this.who.user; // your logic
  }

Puis dans votre modèle:

<li *ngIf="authService.userLoggedIn && !authService.adminLoggedIn"...
0
bob