Discussion :

[Array Oport]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[krakatoa]

problème :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[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.