Angular 7: 将observable返回的对象值赋值给变量

Question

我在尝试将 return 值从服务分配给组件时遇到问题。

  ngOnInit() {
    this.getInspectionData();
  }

  getInspectionData() {
    this.auctionService.getInspectionResult(`df570718-018a-47d8-97a2-f943a9786536`)
      .subscribe(data => {
        console.log(`this is data returned: `, data);
      }, error => {
        console.log('failed to get data', error);
      }, () => {
        console.log('getInspectionResult successfully processed');
      });
  }

它在 console.log

中成功获得了 returned 值

console.log result

里面subscribe()。似乎没有问题。即使我将 console.log 设置为 subscribe():

中的变量

  .subscribe(data => {
    this.inspectionResult = data;
    console.log(`value from getInspectionData: `, this.inspectionResult);

它正确地给出了 this.inspectionResult 输出。

应该没错吧？然后我添加 this.inspectionResult = data;

但是....

当我测试它时，变量出错了，它变成了'{}'。下面的代码：

  ngOnInit() {
    this.getInspectionData();
    console.log(`value from getInspectionData: `, this.inspectionResult);
  }

  getInspectionData() {
    this.auctionService.getInspectionResult(`df570718-018a-47d8-97a2-f943a9786536`)
      .subscribe(data => {
        this.inspectionResult = data;
      }, error => {
        console.log('failed to get data', error);
      }, () => {
        console.log('getInspectionResult successfully processed');
      });
  }

this is the result

顺便说一句，我分配了这样的变量：

  inspectionResult: InspectionResult = <InspectionResult>{};
  inspectionResultData: InspectionResultData = <InspectionResultData>{};

我的问题是：

为什么数据值没有分配给 this.inspectionResult？
为什么 ngOnInit() 没有给出我期望的输出方式？（ngOnInit() 中的 console.log() 应该在 getInspectionData(); 之后运行）

Answer 1

这可能是由于

this.getInspectionData(); console.log(value from getInspectionData:, this.inspectionResult);

在这种情况下，this.getInspectionData() 这个过程可能会有延迟。但是 console.log() 在上述方法完成之前正在执行。

您必须等待方法完成。请参考这个你会清楚一些

http://www.damirscorner.com/blog/posts/20170127-Angular2TutorialWithAsyncAndAwait.html

Angular 7: 将observable返回的对象值赋值给变量

Angular 7: assigning object value returned from observable to variable

frontend

typescript

angular

angular-httpclient