在 angular 中加载数据之前调用的函数

Question

你好，我对 angular 有点陌生，我在加载数据时遇到了问题。在下面的代码片段中，我调用了两个服务。在每项服务中，我都会向控制台输出一些内容。在这两项服务运行之后，我有一段代码可以将我的订单号再次输出到控制台。然而每次我运行这个。它通过 ngOnInit 启动并在控制台中输出以下信息。我怎样才能让最后的控制台输出等到前两个服务完全完成。

订单未定义
仓库数组测试仓库名称

站点长度 18

ngOnInit(): void {
//called first
this.dataService.sendGetRequest().subscribe((data: any[]) => {
  this.orderInfoList = data;
  console.log("array of depots "+ this.orderInfoList.depots[1].name);
  console.log("length of depots "+ this.orderInfoList.depots.length);
})
//called second
this.dataService.getOrder(+this.orderId).subscribe((data: any[]) => {
  this.order = data;
  console.log("order " + this.order.orderNumber);
})
//entered last
console.log("order " + this.order.orderNumber);

}

Answer 1

数据服务函数是异步的，所以您需要运行它们是异步的。由于 getOrder 不依赖于 sendGetRequest 的结果，您可以使用 forkJoin.

并行运行它们

它们都将被执行，并且只有在两者都完成后订阅才会运行。

ngOnInit(): void {
  forkJoin({
    getRequest: this.dataService.sendGetRequest(),
    order: this.dataService.getOrder(+this.orderId)
  }).subscribe(result => {
    this.orderInfoList = result.getRequest;
    this.order = result.order;

    console.log("array of depots "+ this.orderInfoList.depots[1].name);
    console.log("length of depots "+ this.orderInfoList.depots.length);
    console.log("order " + this.order.orderNumber);
  });
}

forkJoin 也接受一个可观察数组：

forkJoin([
  this.dataService.sendGetRequest(), 
  this.dataService.getOrder(+this.orderId)
]).subscribe(result => {
  this.orderInfoList = result[0];
  this.order = result[1];
});

在 angular 中加载数据之前调用的函数

Functions calling before data is loaded in angular

lifecycle

http

angular