Accéder à un index de tableau à l'extérieur de ngFOr

C'est encore moi,

Je cherche à acceder à l'index d'un tableau dans un template mais à l'exterieur ddu ngFor, un peu comme ça :

Code:

---

1 2 3 4

<div *ngFor="let item of items; let indexItem = index"> ............................ </div> <div>{{ indexItem }}</div>

---

Est-ce possible ? Merci

ça fait un peu bidouille mais je ne vois pas d'autres façons .
et je ne sais pas si ça peut fonctionner :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div *ngFor="let item of items; let indexItem = index"> ............................ {{ myFonction(indexItem) }} </div>   <div>{{ index }}</div> ... ... index = 0;     myFonction(indexItem) { this.index = indexItem; }

---

tu veux faire ça dans quel but ?

Hello, comment vas-tu depuis hier ? lol

en fait pour faire simple j'ai une petie appli mobile avec un footer menu comme ceci
Pièce jointe 599896

le fait de cliquer dans l'un des items en bas (il y en a 2 pour l'instant) modifie un message affiché dans le header (ici les 2 messages s'affichent en meme temps)
Bon je précise que j'ai réussi avec un ngSwitch mais je voulais tester autrement comme ceci :

dans le html du header

Code:

---

1 2 3 4 5 6 7 8

<div fxLayout="row" fxLayoutAlign="space-around center" class="header"> <img class="position-logo" src="assets/img/logo.png" alt=""> <div> <!-- mauvais code ! --> <div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index"></div> <p>{{ emitMsg(indexItem) }}</p> </div> </div>

---

dans le ts du header, une fonction me permet de récupérer le message du header en fonction de l'index en argument :

Code:

---

1 2 3

emitMsg(indexMsg: number): string { return this.itemsFooterMenu.find(x => x.index === indexMsg).message }

---

pour l'instant j'ai un service en dur qui me fournit tout ça grace à un tableau grace à la propriété "message : chaque ligne contient toutes les propriétés dont j'ai besoin pour générer mon menu et les messages du header :

Code:

---

1 2 3 4

itemsMenu: any[] = [ { index: 0, utilRoute: "zone", style: "blue", matIcon: "archive", message: 'affectez un zonage' }, { index: 1, utilRoute: "price", style: "blue", matIcon: "euro", message: 'affectez un prix de vente' }, ];

---

Bon c'est juste pr ma culture....

faut utiliser les bonnes pratiques notamment la communication par service via un observable.

grossièrement, dans le composant d'en bas :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

itemsMenu: any[] = [ { index: 0, utilRoute: "zone", style: "blue", matIcon: "archive", message: 'affectez un zonage' }, { index: 1, utilRoute: "price", style: "blue", matIcon: "euro", message: 'affectez un prix de vente' }, ];   (click)="onMenu(index)" ... ... onMenu(index) { this.myService.obsMenu$.next(this.itemsFooterMenu.find(x => x.index === index).message) }

---

dans le header

Code:

---

1 2 3 4 5 6 7 8

{{message}}   ... message;   ngOnInit() { this.myService.obsMenu$.subscribe(message => this.message = message)

---

myService

Code:

---

1 2 3 4

... public obsMenu$ = new behaviorSubject(''); ...

---

ah oui tu t'abonnes au subject dans chaque item du menu si je comprends bien, il me semblait bien qu'un subject serait une solution

merci à toi !

non pas dans chaque item !

non pardon, c'est le header du coup qui est abonné et les items qui émetent l'index...les subjects ça me chatouille tjrs un peu les neurones. Bon enfin je regarde, je reviendrai te dire

C'est Ok! ça marche avec le beahviorSubject !