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

Posted 2023-02-22

【中文标题】Angular 5+ 无法保存结果形式的可观察响应

【英文标题】：Angular 5+ cannot save result form observable response

【发布时间】：2018-10-28 15:02:00

【问题描述】：

我有一个使用来自 webapi 的数据的 Angular 应用程序。 当我提出请求时，我会得到一个输入的 observable。

现在当我这样做时：

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

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

我可以清楚地看到，结果有我需要的产品。 但是为什么我不能把它保存到我的局部变量数据中呢？

谢谢

【参考方案1】：

Observable 和 Promise 一样是异步的。所以console.log(this.data); 在返回响应之前执行。试试吧。

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

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

【参考方案2】：

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

当我尝试调试 rxjs observable 时，我使用 do 和 finally