Angular 5+无法保存可观察响应的结果

Question

我有一个Angular应用程序，它使用来自webapi的数据。 当我提出请求时，我得到一个类型化的可观察数据。

现在当我这样做时：

data: Product[];
productService.getByProductId("061000957").subscribe(res => {
      console.log(res);
      this.data = res;
});
console.log(this.data);

我在控制台中看到的内容我可以看到这个

我可以清楚地看到，结果是我需要的产品。 但为什么我不能将其保存到我的本地变量数据？

由于

Answer 1

Observable就像promise一样异步。因此在返回响应之前执行console.log(this.data);。试试。

data: Product[];
productService.getByProductId("061000957").subscribe(res => {
       console.log(res);
       this.data = res;
       console.log(this.data);
    });

现在您在设置数据后打印数据。

Answer 2

您正在使用async programming ，您无法暂停代码的执行，您的订阅将在以后解决，但您无法预测何时。订阅之外的console.log()在您的订阅被解决之前执行。您可以做的是您可以将值存储在订阅回调中的类属性中。请参阅this以便更好地理解。

   data: Product[];
productService.getByProductId("061000957").subscribe(res => {
       console.log(res);
       this.data = res;
       console.log(this.data);
    });

Answer 3

您应该将数据保存在HTTP Observable订阅中：

productService.getByProductId("061000957").subscribe(res => {
   this.data = res;
   console.log(this.data)   //you can see
})

Answer 4

你可以这样做，最后这里将在getProductId完成后执行

productService.getByProductId("061000957")
      .finally(() => console.log(this.data))
      .subscribe(res => {
           console.log(res);
           this.data = res; 
    });

当我尝试调试rxjs observable时，我使用 do，最后