Question

在下面的函数中，console.log（data）返回我的有效负载，但在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

您需要将console.log放置在 subscribe 内，因为api的响应是异步产生的

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

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

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

Answer 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"

将数据从subscribe（）传输到Angular 6中的变量

3 个答案: