javascript - Angular 2+ vent på at subscribe skal fullføre før oppdatering/tilgang til variabel

Jeg har et problem med at variablene mine er udefinerte. Jeg er sikker på at dette er fordi observablen ikke er ferdig. Her er delen av koden min i .ts-filen som forårsaker problemet. (Jeg legger inn minimumskoden som kreves for å forstå problemet. Også myFunction blir kalt fra en klikkhendelse i HTML).

export class myClass {
  myVariable: any;

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

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

Så denne koden kaller en funksjon i tjenesten min som returnerer noen data fra en API. Problemet er at når jeg prøver å få tilgang til variabelen myVariable rett utenfor subscribe-funksjonen, returnerer den undefined. Jeg er sikker på at dette er fordi subscribe ikke har blitt fullført før jeg prøver å få tilgang til myVariable.

Er det en måte å vente på at abonnementet skal fullføres før jeg prøver å få tilgang til myVariable?

Svar #1

hvorfor ikke lage en egen funksjon og kalle den inne i abonnementet.

export class myClass {
  myVariable: any;

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

    this.update()
  }

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

Svar #2

Som du vet blir abonnementer utført når serveren returnerer data, men koden utenfor abonnementet kjøres synkront. Derfor blir console.log utenfor det utført. Svaret ovenfor kan gjøre jobben din, men du kan også bruke .map og return observable som vist nedenfor.

la oss si at du ringer det fra en tjeneste

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()
    });
  }

}

Relaterte artikler