Récupération variable @Input()

Version imprimable

Bonjour,

Dans ce bout de code, je souhaite affecter la valeur "toto" ou "tutu" à ma variable "test" :
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 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

le résultat est normal au vu du code

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

26/09/2020, 15h05
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....

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:

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:

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

*** asynchrone

parentComponent

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

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.

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

Dans l'enfant...
Code:

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:

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