Передача данных из подписчика () в переменную в Angular 6

Question

В приведенной ниже функции console.log (data) возвращает мою полезную нагрузку, но я получаю «undefined» в console.log (this.finalData). Как лучше хранить подписанные данные в моей переменной this.finalData?

component.ts

getFavorites(){
  this.jobService.getFavoritesFromDB().subscribe((data) =>  { 
   console.log(data)
   this.finalData = data
  });
  console.log(this.finalData)

 }

service.ts

getFavoritesFromDB(){
    return this.http.get("http://localhost:3000/post");
}

Answer 1

Если вы пытаетесь использовать this.finalData после завершения подписки, посмотрите на событие complete , которое происходит после успешного завершения подписки.

Пример

  getFavorites() {
    this.jobService.getFavoritesFromDB().subscribe((data) => {
      console.log(data)
      this.finalData = data
      },
      error => {
        // handle error calling getFavoritesFromDB()
      },
      () => {
        // Note: If getFavoritesFromDB() has an error, the complete function will not get called

        // The call getFavoritesFromDB() was successful
        // Now you can use this.finalData
        console.log(this.finalData);
      });
  }

Для получения дополнительной информации о Подписаться ( onNext , onCompleted и onError ) см. Официальную документацию ReactiveX: http://reactivex.io/documentation/operators/subscribe.html

Answer 2

проблема в том, что ваш оператор console.log выполняется даже до того, как вы получите ответ (асинхронный).

То, как вы храните данные в переменной, совершенно нормально, вам просто нужно переместить оператор консоли внутри подписки.

Ниже показано, как это выполняется

console.log("going to call method") --- (1)

getFavorites(){ --- (2)
  console.log("executing...") --- (3)
  this.jobService.getFavoritesFromDB().subscribe((data) =>  { 
   console.log("data inside subscribe", data) --- executes when response arrives --- (5)
   this.finalData = data
  });
  console.log("data outside subscribe", this.finalData); --- (4)
  ... and continues   
 }

O / P:

going to call method
executing...
data outside subscribe  // undefined or null (blank)
data inside subscribe "your data"

Answer 3

Вам нужно поместить console.log внутри subscribe, так как ответ от API приходит асинхронно

getFavorites(){
  this.jobService.getFavoritesFromDB().subscribe((data) =>  { 
   console.log(data)
   this.finalData = data;
   console.log(this.finalData)
  });
 }