Discussion :

[olivier252]

Bonjour,

Dans ce bout de code, je souhaite affecter la valeur "toto" ou "tutu" à ma variable "test" :

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
 
test: string;
result1: any;
result2: any;
 
ngOnInit() {
  this.unService.getQuelqechose()
    .subscribe( () => {
      this.fonction1();
    });
}
 
fonction1() {
  if(.....) {
    this.test = 'toto';
    this.monService.getSomething()
      .subscribe(result1 => {
        this.result1 = result1;
        this.fontion2();
          });
  } else {
    this.fonction2();
  }
}
 
fonction2() {
  if(.....) {
    this.test = 'tutu';
    this.monService.getSomething()
      .subscribe(result2 => {
        this.result2 = result2;
          });
  } else {
    ..........;
    }
}

Je récupère ma variable en @Input() dans le composant enfant et mon soucis c'est que ma variable "test" vaut systématiquement "tutu". Je suppose que la valeur "toto" est écrasée sitôt l'appel de fonction2()).
Pourtant l'appel de fonction2() est asynchrone, et je pensais que cela me permettrait de récupérer soit une valeur soit l'autre.
Avez-vous une idée de comment je peux procéder pour récupérer l'une ou l'autre des valeurs de la variable "test" ?
Merci d'avance

[dukoid]

le résultat est normal au vu du code

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
test: string;
result1: any;
result2: any;
 
ngOnInit() {
  this.unService.getQuelqechose()
    .subscribe( () => {
      this.fonction1();           
    });
}
 
fonction1() {
  if(.....) {
    this.test = 'toto';
    this.monService.getSomething()
      .subscribe(result1 => {
        this.result1 = result1;
        this.fontion2();                 //    ICI   APPEL DE LA FONCTION2
          });
  } else {
    this.fonction2();                    //     ICI   APPEL DE LA FONCTION2
  }
}
 
fonction2() {
  if(.....) {
    this.test = 'tutu';                //  N'EST PAS ASYNCHRONE
    this.monService.getSomething()   //  EST ASYNCHRONE
      .subscribe(result2 => {              //  EST ASYNCHRONE
        this.result2 = result2;              //  EST ASYNCHRONE
          });
  } else {
    ..........;
    }
}

dans ton if et le else de la fonction1, tu appelles la fonction2
donc forcement this.test contiendra toujours tutu

certes, dans le if il y aura un petit décalage de quelques milliseconde mais ça ne se verra pas
et apparemment, dans tes tests il ne va jamais dans le else de la fonction2


qu'essayes tu de faire ?

[olivier252]

Merci de t'intéresser à mon problème,

Pour le contexte, je reprends la partie front d'un projet dans la société qui'm'emploie. C'est ma 1ere expérience et je n'ai jamais touché à angular, bref, je suis un junior qui galère
Du coup le but c'est de récupérer cette variable dans un composant enfant et de l'inclure dans un if else pour piloter une action tierce, sauf que évidemment la variable possède toujours la même valeur.

J'ai dit au chef de projet un peu ce que tu m'as dit, à savoir que au final on affecte une même variable avec 2 valeurs différentes dans une même méthode (vu que fonction1() contient l'appel de fonction2()) et que c'est pas possible de récupérer l'une ou l'autre des valeurs..
Du coup le but ça serait de pouvoir switcher cette variable "test" mais pour moi c'est pas possible....

[dukoid]

voilà comment on passe une variable d'un parent vers l'enfant
je ne sais pas si tu as fait comme ça !


*** synchrone

parentComponent

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
 
<app-child  [childValue]="parentValue"></app-child>
...
...
 
parentValue;
 
ngOnInit() {
  const value: number = 1;
  if (value === 1) {
     this.parentValue = "1111";
  } else {
     this.parentValue = "2222";
  }
}

ChildComponent

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
{{childValue}}
 
...
...
 
@Input() childValue;
 
ngOnInit() {
   console.log(this.childValue);
}

*** asynchrone

parentComponent

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
 
<app-child  [childValue]="parentValue"></app-child>
...
...
 
  ngOnInit() {
    const value: number = 2;
    if (value === 1) {
       this.timeDelay().then((res) => {               // simulation d'un delais de 400ms
        this.parentValue = "1111";
       });
    } else {
      this.timeDelay().then((res) => {                 // simulation d'un delais de 400ms
        this.parentValue = "2222";
       });
    }
  }
 
  timeDelay(): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(true);
      }, 400);           //   après 400ms la promesse est résolu
    });
  }

ChildComponent

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
{{childValue}}
 
...
...
 
@Input() childValue;
 
ngOnInit() {
   console.log(this.childValue);
}

*** tu peux constater qu'en synchrone ou asynchrone, la valeur est mis à jour dans l'enfant.. tout fonctionne normalement.

[olivier252]

Oui tout à fait, j'ai procédé comme ça en effet.
Dans mon exemple :

Dans l'enfant...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
 @Input() test;
 
  constructor(
  ) {}
 
  ngOnInit() {
    console.log("@Input() test  : " + this.test);
  }

Puis dans mon parent :

Code :

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

1
2
3
4
5
6
 
.......................
<app-child*ngIf="interventionLastLate && interventionLastLate.length > 0"
      [test]="test">
    </app-child>
........................

Le bout de code montré ds mon 1er post est le typescript du parent comme tu t'en doutes. Le console.log de l'enfant affiche toujours "tutu" (ce qui est logique en effet).