将数据从 subscribe() 传输到 Angular 6 中的变量答案

【问题标题】：Transferring data from subscribe() to variable in Angular 6将数据从 subscribe() 传输到 Angular 6 中的变量
【发布时间】：2019-02-10 01:04:21
【问题描述】：

在下面的函数中，console.log(data) 正在返回我的有效负载，但我在 console.log(this.finalData) 中得到“未定义”。将订阅的数据存储到我的 this.finalData 变量的最佳做法是什么？

组件.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");
}

【问题讨论】：

标签： angular observable angular-services

【解决方案1】：

您需要将 console.log 放在 subscribe 中，因为来自 api 的响应是异步的

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

【讨论】：

【解决方案2】：

如果您在订阅完成后尝试使用 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);
      });
  }

有关 Subscribe（onNext、onCompleted 和 onError）的更多信息，请参阅 ReactiveX 官方文档： http://reactivex.io/documentation/operators/subscribe.html

【讨论】：

【解决方案3】：

问题是您的 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"

【讨论】：