Enregistrement tableau dans mon service

Version imprimable

04/08/2021, 12h44
Grillonfou

4 pièce(s) jointe(s)

Enregistrement tableau dans mon service

Bonjour à tous,

Je fais face à un soucis qui m'échappe complètement.
Afin de générer des alertes j'ai crée un composant "notification". Ce composant prend en input un champ "name". A chaque instanciation de ce composant, je fais appel à un service du nom de notification.service. Ce service contient deux méthode, dans mon cas uniquement la première nous intéresse. Cette méthode prend en entrée un string (le nom du composant) est l'ajoute à une liste. Tout marche bien pour un composant, le problème apparait lorsque j'en instancie un second, ma liste de notification contenu dans le service est modifié alors qu'elle devrait seulement contenir la liste des composants + le nouveau que je viens d'instancier. Je vous mets les screens des composants + de la console.

Notification.service:
Pièce jointe 602728

Notification component:
Pièce jointe 602729

Console:
Pièce jointe 602730

Comme vous pouvez le voir dans la console, l'instanciation du second composant viens remplacer l'enregistrement du composant à l'indice 0 de ma liste. La seule hypothèse que j'ai c'est que lors de la création de la variable "obj" dans mon service, l'adresse mémoire soit la même que celle de l'obj de l'instance précédente ce qui expliquerait ce changement dans ma liste, mais ca me paraît tiré par les cheveux.

Merci d'avance pour votre aide,

EDIT: Le problème est résolu et l'erreur relève de l'étourderie. Je me suis aperçu qu'en mettant plusieurs composants, tous se mettaient bien mais le dernier ajouté venait remplacer à chaque fois le premier. Et le problème se trouve juste ici:
Pièce jointe 602787

Lors de l'init de mon composant je viens l'enregistrer dans mon service et je récupère la référence de son objet pour le manipuler plus tard. Le problème est que dans le find, au lieu d'avoir mis un test ("===") j'avais mis à la place une affectation ("="). Forcément lors de la première itération du find le premier élément de ma liste était à chaque fois remplacé par le dernier nom du dernier composant ajouté

En tout cas merci à krakatoa pour son aide !
04/08/2021, 13h52
krakatoa
et oui, une instance dans Angular est un singleton.
ceci afin qu'une même instance soit disponible pour tous les composants qui la demande.
par défaut, la portée est : 'root'

si tu veux que ton service ai une porté uniquement au niveau du composant (et ses enfants)
il faut déclarer le service dans le composant :
Code:

1 2 3 4 5 6 7 @Component({ selector: 'app-page-qr', templateUrl: './page-qr.component.html', styleUrls: ['./page-qr.component.scss'], providers: [MyService] })
ainsi le composant aura sa propre instance de : MyService !
04/08/2021, 14h01
Grillonfou

Merci pour ta réponse, mais justement je cherche à profiter de l'effet singleton pour partager une même instance de mon service entre plusieurs instance de mon composant. Ce que je ne comprends pas c'est pourquoi la seconde instance de mon composant viens écraser dans la liste de mon service l'enregistrement de la première instance de mon composant

C'est ce que tu peux voir dans le screen de ma console sous le "list apres init du composant". Lors du premier init j'appelle une première fois mon service et je fais un ajout dans mon tableau et lors de la deuxième instanciation de mon composant je fais encore un ajout dans mon tableau, celui-ci se fait bien mais vient écraser le premier.

je l'avais pas vu, il te manque
Code:

1 2 3 4 5 @Injectable({ providedIn: 'root', }) export class AuthService {

04/08/2021, 14h16
Grillonfou

1 pièce(s) jointe(s)

Non plus, pour rendre mes services singleton je passe par le app.module.ts, c'est la seconde possibilité proposée par Angular
Pièce jointe 602735
04/08/2021, 14h22
krakatoa

tu peux me mettre le texte du code, notamment le service
avec les balises <CODE
parceque avec l'image je ne peux pas copier coller !

(je crois que c'est une histoire de référence, je voudrais tester)

Oui bien sûr, je pense aussi à une erreur de référence mais j'arrive pas à voir où:

Service:

Code:

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
import { Injectable } from '@angular/core';
 
@Injectable()
export class NotificationService {
 
  listNotification: any[] = []
  constructor() { }
 
  setNew(n: string){
    let obj: any = {
      name: n,
      hidden: true,
      type: '',
      message: ''
    };
    if(this.listNotification.find(element=>element.name === obj.name)===undefined){
      this.listNotification.push(obj);
    }
 
    console.log("Objet à insérer après l'init du composant:")
    console.log(obj);
    console.log('List apres init du composant:');
    console.log(this.listNotification);
  }
 
  setAlert(name: string, type: string, message: string){
    console.log(this.listNotification);
      let obj = this.listNotification.find(element => element.name === name);
      obj.hidden = false;
      obj.type = type;
      obj.message = message;
      setTimeout (() => {
        obj.hidden = true;
     }, 5000);
  }
}

Composant:

Code:

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
import { Component, Input, OnInit } from '@angular/core';
import { NotificationService } from '../services/notificationService';
 
 
@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
 
  @Input() name = '';
  info: any = {};
  static indice: number = 1;
 
  constructor(private notificationService: NotificationService) {}
 
  ngOnInit(): void {
    console.log("Nombre d'init du composant: ")
    console.log(NotificationComponent.indice);
    NotificationComponent.indice++;
 
    this.notificationService.setNew(this.name);
    this.info = this.notificationService.listNotification.find(element => element.name = this.name);
 
    console.log("info: ");
    console.log(this.info);
  }
 
  onClickInput(){
    this.info = this.notificationService.listNotification.find(element => element.name = this.name);
    this.info.hidden = true;
  }
}

04/08/2021, 14h49
krakatoa
j'ai testé rapidement ici :
https://stackblitz.com/edit/angular-ivy-jxhxvu
et ça fonctionne !

tu peux tester ça et donner le résultat :
Code:

1 2 3 4 setNew(n: string){ console.log('n', n); ...
04/08/2021, 14h59
Grillonfou

1 pièce(s) jointe(s)

La seule différence c'est que tu as utilisé deux composants distincts alors que moi j'utilise le même composant mais avec plusieurs instances, chose que j'ai déjà fait par le passé et qui ne m'a jamais posé problème,

Pour le test:
Pièce jointe 602738

En tout cas merci du temps que passes à m'aider
04/08/2021, 15h03
krakatoa
essaye :
Code:

1 2 3 4 5 6 7 const obj: any = { name: n, hidden: true, type: '', message: '' };
tu devrais avoir :
0: {n ame: 'generationOgp
1: {name: 'gestionFroupement
04/08/2021, 15h05
Grillonfou

Malheureusement j'ai déjà essayé aussi et même résultat
04/08/2021, 15h05
krakatoa

tu devrais avoir :
0: {n ame: 'generationOgp
1: {name: 'gestionFroupement

c'est ça ?
04/08/2021, 15h08
Grillonfou

Oui c'est ça, et j'arrive pas à comprendre comment en un push une valeur peut être ajoutée et une autre modifiée. La seule explication que j'ai c'est que les deux objets ont la même référence ce qui me paraît étrange

et ça, au lieu du push :
et met const obj .......

Code:

1
2
3
4
5
 
      this.listNotification[
          ...this.listNotification,
          obj
      ];

04/08/2021, 15h18
Grillonfou

Désolé mais je crois pas connaitre ou avoir compris cette notation
04/08/2021, 15h22
krakatoa

ça fonctionne ou pas ?
04/08/2021, 15h23
Grillonfou

Non toujours pas

Code:

1
2
3
4
      this.listNotification[                // une nouvelle reference
          ...this.listNotification,          // on ajoute le contenu du tableau
          obj                                    // + un nouveau élément
      ];

bon, faut que je me concentre 8O8O8O8O8O8O

comment se fait le 2eme appel ?

04/08/2021, 15h37
Grillonfou

Même principe que pour le premier, dans le .html je crée un nouveau composant et dans le ngOnInit je fais appel au service. Et comme on peut le voir dans la console, le deuxième appel se fait bien comme il faut

Code:

1
2
3
4
5
6
7
8
9
    if (
      this.listNotification.find(element => element.name === obj.name) ===
      undefined
    ) {
      console.log('obj avant push=', obj);
      console.log('this.listNotification  avant push', this.listNotification);
      this.listNotification.push(obj);
    }

04/08/2021, 15h48
Grillonfou

1 pièce(s) jointe(s)

Voila:
Pièce jointe 602740
04/08/2021, 15h50
krakatoa

et bien obj, il n'y a rien ?
c'est la ligne 20
04/08/2021, 15h55
Grillonfou

1 pièce(s) jointe(s)

Désole je me suis raté:
Pièce jointe 602741

Je comprends pas comment avant le deuxième push il peut déjà y avoir deux valeurs
04/08/2021, 15h58
krakatoa

non rien

si tu pouvais me reproduire le truc sur stackblitz !
c'est très mysterieux
04/08/2021, 16h04
Grillonfou

1 pièce(s) jointe(s)

Je vais faire ca mais par rapport au message que tu as enlevé j'ai eu le temps de voir, l'enregistrement est déjà fait avant même le push, il doit y avoir un problème ailleurs:
Pièce jointe 602743
04/08/2021, 16h20
Grillonfou

Normalement ca ressemble à ca, en espérant pas avoir fait d'erreur:
https://stackblitz.com/edit/angular-...component.html
04/08/2021, 16h23
krakatoa

et là ça fonctionne ?
04/08/2021, 16h25
Grillonfou

Plus ou moins le même problème qu'avant, avant même le push j'ai déjà des données dans la liste
04/08/2021, 16h26
krakatoa
je ne vois rien d'anormal
tu en es sur ?

ah oui ça
Code:

1 2 3 4 5 6 7 Nombre d'init du composant: 1 n generationOGP obj avant push= {name: "generationOGP", hidden: true, type: "", message: ""…}
mais c'est normal, meme dans la console il fait une reference
04/08/2021, 16h29
Grillonfou

1 pièce(s) jointe(s)

Oui, le second composant viens ajouter un élément et remplace le précédent:
Pièce jointe 602745
04/08/2021, 16h32
krakatoa

1 pièce(s) jointe(s)

Pièce jointe 602746

ou sinon, tu gères avec des subjects. c'est très bien et même mieux

exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { ReplaySubject } from 'rxjs';
 
const sub = new ReplaySubject();
 
sub.next(1);
sub.next(2);
sub.subscribe(y => console.log('y', y)); // 1 2 3 4 5
sub.next(3);
sub.next(4);
sub.next(5);
 
sub.subscribe(x => console.log('x', x)); // 1 2 3 4 5

04/08/2021, 17h19
Grillonfou

Oui en effet pour la console je dis n'importe quoi. En revanche je comprends pas comment tu as pu obtenir ton résultat ? Tu t'es servi de ce que j'ai fait sur stackblitz ? Parce que au final je me retrouve à la fin du deuxième push avec deux fois "groupementOGP" à la place de "generationOGP" et "groupementOGP"
04/08/2021, 17h21
krakatoa

j'ai relancé pour etre sur et toujours les bons résultats.
je n'ai rien touché à ton code
04/08/2021, 17h25
Grillonfou

1 pièce(s) jointe(s)

Alors là j'y comprends plus rien :weird:
Pièce jointe 602751
04/08/2021, 17h25
krakatoa

MDR :ptdr:

ce n'est pas l'environnement puisque c'est celui de stackblitz donc on doit avoir le meme resultat
peut etre les navigateurs j'essais

edge et chrome, meme bon resultat
04/08/2021, 17h41
Grillonfou

A ne plus rien y comprendre je viens de tester sur chrome, edge et firefox et j'ai le même résultat que précédemment...

je dois y aller.

sinon pour info, tu pourrais essayer ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
import { ReplaySubject } from 'rxjs';
import { scan } from 'rxjs/operators';
 
const sub = new ReplaySubject();
 
sub.next(1);
sub.next(2);
sub.subscribe(y => console.log('y', y)); // 1 2 3
sub.next(3);
sub.subscribe(x => console.log('x', x)); // 1 2 3
 
 
sub
  .pipe(scan((acc, value) => [...acc, value], []))
  .subscribe(z => console.log('z', z)); 
 
 
[1, 2, 3]
0: 1
1: 2
2: 3

04/08/2021, 17h46
Grillonfou

Ca marche je vais voir ca,

Merci beaucoup en tout cas ! :D