Angular Observable 需要先完成

Question

@Input() list: string[];

ngOnInit() : void {
   this.valueMap = new Map<any, any>();
   this.getDataFromService();
   this.buildContainer();
}

private getDataFromService(): void {
  this.list.forEach(value-> {
      this.fetchService(value).subscribe(data ->{
          this.valueMap.set(value,data);
          }
       )
   })
}

private buildContainer(): void {
   console.log(this.valueMap.size); // shows always 0 even when service returns the data 
 }

现在的事情是我必须在方法 buidlContainer() 中使用这个 valueMap ，因此我需要首先从服务中获取完整的 map 。当我在 buildConatainer() 中使用该 map 时，它显示 undefined 。

我知道这是一些异步调用问题。另外，我无法为 .subscribe() 中的每个值调用方法 buildContainer() ，因为这不是更好的主意。因此，我必须先计算 map ，然后再进一步处理。

感谢任何帮助，我无法修改从返回 Observable 到返回 Promise 的服务

我想做如下

private buildContainer(): void {
   for([key,data] of this.valueMap) {
      -----some code----
    }
 }

Answer 1

只需使用forkJoin来等待所有可观察的完成。 forkJoin 会将所有可观察量捆绑为一个。可以返回此可观察量，并在 ngOnInit 内订阅它并调用 buildContainer。

 @Input() list: string[];

  ngOnInit(): void {
    this.valueMap = new Map<any, any>();
    this.getDataFromService().subscribe(_ => this.buildContainer());
  }

  private getDataFromService(): Observable<any> {
    return forkJoin(
      this.list.map(value =>
        this.fetchService(value).pipe(
          tap(data => this.valueMap.set(value, data))
        )
      )
    );
  }

  private buildContainer(): void {
    console.log(this.valueMap.size);
  }

如果您不在 tap 运算符内填充 valueMap 而是使用您在订阅函数中获得的结果，代码会更加简洁。