Discussion :

[Tamzoro]

Bonjour,

J'ai un menu avec plusieurs rubriques.



Si je clique sur "Marché" par exemple, les sous-menus s'affichent correctement



Puis, si je clique sur la rubrique "Portefeuille", la rubrique "Marché" se ferme automatiquement.



Pour le moment tout se passe correctement.

Alors, mon problème est au niveau de la rubrique "Portfolio" si je clique sur celle-ci



Les sous-menus de "Portefeuille" ne se sont pas fermés automatiquement.

Je ne vois pas trop comment résoudre ce souci ?

menu.ts

Code :

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

1
2
3
4
5
6
7
8
export type Menu = {
    name: string, 
    id: string,
    iconClass: string, 
    active: boolean,
    submenu: { name: string, url: string }[],
    portfolio: []
  }

online.ts

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
export class OnlineComponent implements OnInit {
 
  private unsubscribe$ = new Subject<void>();
 
  @Select(AuthState.user) user$!: Observable<string>;
  @Select(AuthState.lastConnexionMoment) lastConnexionMoment$!: Observable<ApiConnectionMoment>;
 
  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;
 
  @Select(ProfileState.portfolios) portfolios$!: Observable<Portfolio[]>;
 
 
 
  menus: Menu[] = [
 
    {
      name: 'Portefeuille',
      id: 'portefeuille',
      iconClass: 'bx bx-wallet',
      active: false,
      submenu: [
        { name: 'Titres en portefeuille', url: '/portfolio/stocks' },
        ...
      ],
      portfolio: [],
    },
 
    {
      name: 'Marchés',
      id: 'market',
      iconClass: 'bx bx-chart',
      active: false,
      submenu: [
        { name: 'Valeurs', url: '/markets/stocks' },
        ...
      ],
      portfolio: [],
    },
 
    {
      name: 'Ordres',
      id: 'orders',
      iconClass: 'bx bx-window-open',
      active: false,
      submenu: [
        { name: 'Ordres en note', url: '/orders/standingOrders' },
        ...
      ],
      portfolio: [],
    },
 
    {
      name: 'Portfolio',
      id: 'Portfolio',
      iconClass: 'bx bx-credit-card-front',
      active: false,
      submenu: [
      ],
      portfolio: [],
    },
 
  ];
 
  constructor(
    private store: Store,
    private sandbox: OnlineSandbox,
    private router: Router) { }
 
  ngOnInit() {
  }
 
  selectMenu(parentMenu): void {
 
    this.menus.forEach(menu => {
      if (menu.name !== parentMenu.name) {
        menu.active = false;
      } else {
        menu.active = !menu.active;
      }
    })
 
  }
 
}

online.html

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
17
18
19
20
21
22
<ul class="nav-links">
  <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
    <ng-container>
      <a class="item" (click)="selectMenu(menu)">
        <i [class]="menu.iconClass"></i> <span class="links_name">{{ menu.name }}</span>
        <i class="fa fa-chevron-down"></i>
      </a>
      <ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' } ">
        <li *ngFor="let submenu of menu.submenu">
          <a routerLink="{{ submenu.url }}"> <span class="links_subname">{{ submenu.name }}</span>
          </a>
        </li>
      </ul>
      <ul class="portfolio" #portfolio [ngStyle]="{ 'height': menu.active ? portfolio.scrollHeight + 'px' : 0 + 'px' } ">
        <li *ngFor="let portfolio of (portfolios$ | async)">
          <a> <span class="links_subname whiteColor"> {{ portfolio.NO_PTF }}</span>
          </a>
        </li>
      </ul>
    </ng-container>
  </li>
</ul>

Merci pour votre aide.

[olivier252]

Hello,

Je ne serai peut-être pas d'un grand secours car je ne suis pas très calé en Angular, mais avant toute chose et pour être sûr de comprendre, c'est normal que tu aies un tableau "portfolio dans chaque menu ? En plus ils sont censés contenir chacun une observable, mais ils sont vide ? Soit dit en passant les parenthèses m'étonnent sur la ligne du *ngFor de chaque observable :

Code html :

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

<li *ngFor="let portfolio of (portfolios$ | async)">

Mais peut-être que ça se fait.

Est-ce qu'il y aurait pas de problème de unsubscribe() vu que tu ne quittes jamais la vue du composant principal, ce qui ferait que l'état de ton portfolio serait toujours actif ?

Sinon à froid une petite remarque : si j'étais toi je créerai un composant générique enfant que je réutiliserai pour chaque menu et dans lequel j'injecterai les données via un mécanisme d'input un peu selon le principe du smart-dumb component.
L'enfant expose froidement les datas du parent (le html où tu itères sur ton tableau de menu avec la directive *ngFor.

Bon courage