Question

ngOnInit() {
   this.getTypeList();
   this.buildTemplate();
}

private getTypeList(): void {
        this.searchService.getViewTypeList(this.org)
            .subscribe(viewTypeList => {
                this.viewTypeList = viewTypeList;
            });
      }

this.buildTemplate() : void {
  console.log(this.viewTypeList);
  ****** some code work on viewTypeList***
}

问题是console.log(this.viewTypeList); 在方法中显示未定义。我知道这是一个异步调用，需要花费一些时间才能完成，但是与此同时，我的下一个代码 this.getTypeList()被执行并显示为undefined。

我希望一旦HTTP服务中的数据可用，我所有剩余的处理都应完成。像我这样的事情在没有来自服务的数据的情况下不应继续进行，因为它为代码中的所有其余方法提供了未定义的信息。还是有什么办法可以让我事先利用服务中的数据来处理该问题

Answer 1

从 ngOnInit 中删除 this.buildTemplate（），并将其放入订阅中。

private getTypeList(): void {
        this.searchService.getViewTypeList(this.org)
            .subscribe(viewTypeList => {
                this.viewTypeList = viewTypeList;
                this.buildTemplate();
            });
      }

Answer 2

Http调用是异步调用。随后的调用将被执行，并且将不等待承诺被解决。

解析后，应编写您的依赖代码。

在API调用解决后，而不是在ngOnInit中调用buildTemplate()。

private getTypeList(): void {
    this.searchService.getViewTypeList(this.org)
        .subscribe(viewTypeList => {
            this.viewTypeList = viewTypeList;
            this.buildTemplate();  //here your data is available.
        });
}

Answer 3

在this.buildTemplate()方法中调用subscribe()，而不是在ngoninit中调用。

仅当从服务器加载数据时，才会构建此模板。同时，您可以显示虚拟信息，例如加载状态。

Answer 4

首先应检查可观察性和Promise的工作方式以及异步和同步过程之间的区别。

如果我们查看您的情况。您使用可观察到的异步过程。这是什么意思？这意味着您的代码是独立工作的。如果异步功能完成，则下一行不等待。因此，如果要在异步完成后调用此函数，则有两种方法，第一种是在异步函数的subscription方法中采用第二个函数。

.subscribe(viewTypeList => {
            this.viewTypeList = viewTypeList;
            this.buildTemplate(); 
        });

另一种方法是将promise与await一起使用，而不是observable。然后它将像同步一样工作。它将等待完成优先功能。

可观察的是稍后返回数据

4 个答案: