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 !

[olivier252]

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 !