javascript - Angular 2+ așteaptă ca subscribe să se termine pentru a actualiza/accesa variabila

Am o problemă cu variabilele mele care sunt nedefinite. Sunt sigur că acest lucru se datorează faptului că observable-ul nu s-a terminat. Iată partea din codul meu din fișierul .ts care cauzează problema. (Am inclus codul minim necesar pentru a înțelege problema. De asemenea, myFunction este apelată de un eveniment de click în HTML).

export class myClass {
  myVariable: any;

  myFunction() {
    this.myService.getApi().subscribe(data => {
      this.myVariable = data;
    });

    console.log(myVariable) --> undefined
  }
}

Așadar, acest fragment de cod apelează o funcție din serviciul meu care returnează niște date de la un API. Problema este că atunci când încerc să accesez variabila myVariable imediat în afara funcției subscribe, aceasta returnează undefined. Sunt sigur că acest lucru se întâmplă deoarece subscribe nu s-a terminat înainte să încerc să accesez myVariable

Există o modalitate de a aștepta ca abonarea să se finalizeze înainte să încerc să accesez myVariable?

Răspuns #1

de ce să nu creezi o funcție separată și să o apelezi în interiorul abonamentului.

export class myClass {
  myVariable: any;

  myFunction() {
    this.myService.getApi().subscribe(data => {
      this.myVariable = data;
      this.update()
    });

    this.update()
  }

  update(){
    console.log(this.myVariable);
  }
}

Răspunsul #2

După cum știți, abonamentele sunt executate atunci când serverul returnează date, dar codul de din afara abonamentului se execută sincron. De aceea, console.log din afara acestuia este executat. Răspunsul de mai sus poate să-ți facă treaba, dar poți de asemenea să folosești .map și return observable așa cum este arătat mai jos.

să spunem că îl apelezi dintr-un serviciu

export class myClass {
  myVariable: any;

  // calling and subscribing the method.
  callingFunction() {

    // the console log will be executed when there are data back from server
    this.myClass.MyFunction().subscribe(data => {
      console.log(data);
    });
  }
}


export class myClass {
  myVariable: any;

  // this will return an observable as we did not subscribe rather used .map method
  myFunction() {
    // use .pipe in case of rxjs 6 
    return this.myService.getApi().map(data => {
      this.myVariable = data;
      this.update()
    });
  }

}