Question

在我的一个组件中，我需要遍历一组ID，并为每个ID进行API调用。 api调用return observables，此刻我只订阅循环中的每个并将其值添加到数组中。我认为这不好，因为我要分别订阅每个电话。有没有办法我可以使用类似mergeMap之类的东西来创建循环中所有组合值的可观察值？

这样，我有一个可以订阅的观察对象（或使用HTML中的异步管道）而不是很多？

这是我的控制器代码：

export class GraphTablesComponent implements OnInit {

  @Input() meta: any;
  @Input() entityId: number;
  kpiData: Array<any> = [];

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit() {
    this.getKpiData();
  }

  private getKpiData(): void {
    for (const m of this.meta) {
      this.apiService.post(`${Endpoints.KPIS}execute/${m._bid}/${this.entityId}`, {}).subscribe(d => this.kpiData.push(d));
    }
  }
}

Answer 1

您可以使用ForkJoin来实现

private getKpiData(): void {
    let requestArray = [];

    for (const m of this.meta) {
      requestArray.push(this.apiService.post(`${Endpoints.KPIS}execute/${m._bid}/${this.entityId}`, {}))
    }

    forkJoin(requestArray).subscribe(data => {
      this.response1 = data[0];
      this.response2 = data[1];
    });
}

如果您直接将其添加到模板中，

.ts

this.data$ =  forkJoin(requestArray)

.html

<ng-container *ngIf="data$ | async; let data">
   {{data | json}}
</ng-container>

Answer 2

您可以使用concat。它将所有可观察物捆绑在一起并使其一个接一个（这意味着它也保留了顺序）：

由于我自己使用过，因此可以举一个简单的例子：

服务方法：

  /**
   * Makes a chain of requests one by one
   * type
   * @param {any[]} data
   * @return {Observable<any>}
   */
  generateTexts(data: any[]): Observable<any> {

    return concat(
      ...data.map(entry => this.httpClient.post(this.url, this.getRequestBody(entry))
    );
  }

可观察到的值：

this.apiService.generateTexts(data).subscribe((response) => {
  // Handle response, this will be called multiple times as long as
  // requests are made
  // 'reponse' contains 1 request response
});

从多个可观察值创建一个可观察值

2 个答案: