从对象数组发出多个请求，并使用Angular扩展数据

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
importimport { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getData(objArray: any[]): Observable<any> {
    const requests = objArray.map(obj => this.http.get(obj.url));
    return forkJoin(requests).pipe(
      map(responses => {
        // 扩展数据到对象数组中的每个对象
        return objArray.map((obj, index) => {
          return {
            ...obj,
            data: responses[index]
          };
        });
      })
    );
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  objArray = [
    { url: 'https://api.example.com/data1' },
    { url: 'https://api.example.com/data2' },
    { url: 'https://api.example.com/data3' }
  ];
  extendedData: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData(this.objArray).subscribe(data => {
      this.extendedData = data;
      console.log(this.extendedData);
    });
  }
}

<div *ngFor="let data of extendedData">
  <p>{{ data.url }}</p>
  <pre>{{ data.data | json }}</pre>
</div>