Angular menu navbar conditionnel

Version imprimable

Bonjour,
je suis en train d'apprendre Angular, je n'arrive pas à afficher ce menu, seul "Angular Router" s'affiche

pour mieux comprendre ce que j'essaie de faire :

il y'a 3 roles : collaborateur, chauffeur, admin

certains liens ne sont visible que quand on est admin ou chauffeur, les 3 premiers liens sont visibles par tout le monde (collaborateurs)

listeRoles contient un array de 3 roles , et ils sont bien récupérés correctement

je pense que le *ngFor n'est peu être pas à la bonne place, j'ai essayé de le mettre dans un li mais ca compile pas,
là le code tel qu'il est là ça compile mais les liens ne s'affichent pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <div class="container">
      <a class="navbar-brand">Angular Router</a>
      <ul class="nav navbar-nav" routerLinkActive="active" *ngFor="let r of listeRoles">
          <li class="nav-item"><a class="nav-link" routerLink="/collaborateur/reservations">Vos réservations</a></li>
          <li class="nav-item"><a class="nav-link" routerLink="/collaborateur/annonces">Vos annonces</a></li>
          <li class="nav-item"><a class="nav-link" routerLink="/collaborateur/statistiques">Statistiques</a></li>
          <li class="nav-item" *ngIf="r=='ROLE_ADMINISTRATEUR'"><a class="nav-link" routerLink="/chauffeur/occupation">Admin Occupation</a></li>
          <li class="nav-item" *ngIf="r=='ROLE_ADMINISTRATEUR'"><a class="nav-link" routerLink="/chauffeur/planning">Admin Planning</a></li>
          <li class="nav-item" *ngIf="r=='ROLE_ADMINISTRATEUR'"><a class="nav-link" routerLink="/admin/chauffeurs">Admin Chauffeurs</a></li>
          <li class="nav-item" *ngIf="r=='ROLE_ADMINISTRATEUR'"><a class="nav-link" routerLink="/admin/vehicules">Admin Véhicules</a></li>
          <li class="nav-item" *ngIf="r=='ROLE_CHAUFFEUR'"><a class="nav-link" routerLink="/chauffeur/occupation">Ch. Occupation</a></li>
          <li class="nav-item" *ngIf="r=='ROLE_CHAUFFEUR'"><a class="nav-link" routerLink="/chauffeur/planning">Ch. Planning</a></li>
      </ul>
  </div>
</nav>

problème :

Code:

<ul class="nav navbar-nav" routerLinkActive="active" *ngFor="let r of listeRoles">

si tu as 5 roles dans listeRoles, alors tu va avoir 5 balises UL de créer !
Code:

1 2 3 4 5 <ul class="nav navbar-nav" routerLinkActive="active"> <ul class="nav navbar-nav" routerLinkActive="active"> <ul class="nav navbar-nav" routerLinkActive="active"> <ul class="nav navbar-nav" routerLinkActive="active"> <ul class="nav navbar-nav" routerLinkActive="active">
solution sans ngfor

Code:

<li class="nav-item" *ngIf="hasRole('ROLE_ADMINISTRATEUR')"><a class="nav-link" routerLink="/chauffeur/occupation">Admin Occupation</a></li>

dans le composant, une fonction hasRole
Code:

1 2 3 4 5 6 7 hasRole(role) { if (listeRoles.indexOf(role) !== -1) { return true; } return false; }

20/02/2020, 23h21
Array Oport

merci, ca marche !

par contre les liens sont placés en vertical, je voudrais qu'ils soient placé à l'horizontal
c'est curieux des fois les ul / li sont à l'horizontale, parfois en vertical, j'ai pas encore compris pourquoi,
normalement par défaut c'est en vertical en html, par contre sous angular ca apparait parfois à l'horizontale
29/03/2020, 15h14
RPGamer

Salut, assure-toi de bien avoir un ul autour de tes li et vérifie tes classes Bootstrap. Le style horizontal ou vertical peut être adapté avec du CSS.