Discussion :

[olivier252]

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

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

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

Est-ce possible ? Merci

[krakatoa]

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

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

[olivier252]

Hello, comment vas-tu depuis hier ? lol

en fait pour faire simple j'ai une petie appli mobile avec un footer menu comme ceci


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

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

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 :

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

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 :

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

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

[krakatoa]

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

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

Code :

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

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 :

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

1
2
3
4
5
6
7
8
 
{{message}}
 
...
message;
 
ngOnInit() {
this.myService.obsMenu$.subscribe(message => this.message = message)

myService

Code :

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

1
2
3
4
 
...
public obsMenu$ = new behaviorSubject('');
...

[olivier252]

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 !

[krakatoa]

non pas dans chaque item !