javascript - 从 Angular 服务获取最终数据

Question

在我的 Angular 6 应用程序中，我有一个 product_id，它是一个数组，

product_id: any = ["123", "456"];

ngOnInit :

  ngOnInit() {
    this.product_id.forEach(element => {
      this.httpClient.get('https://api.myjson.com/bins/hiolc').subscribe(res => {
        this.productList = [];
        res.products.forEach( item => {
          this.productList.push(item);
        });
      })
    })
    console.log(this.productList);
  }

在 console.log(this.productList); 中，我需要得到预期结果，

   [{
      "product_name": "Product One",
      "product_information": {
        "template_details": [
          {
            "template_name": "RACE Template",
            "productProperties": [
              {
                "property_id": 2518427931,
                "property_name": "Length",
                "property_value": "12 cm"
              },
              {
                "property_id": 2621195440,
                "property_name": "Width",
                "property_value": "10 cm"
              },
              {
                "property_id": 2621195441,
                "property_name": "Height",
                "property_value": "20 cm"
              }
            ]
          }
        ]
      }
    },
    {
      "product_name": "Product Two",
      "product_information": {
        "template_details": [
          {
            "template_name": "RACE Template",
            "productProperties": [
              {
                "property_id": 2518427931,
                "property_name": "Length",
                "property_value": "15 cm"
              },
              {
                "property_id": 2621195440,
                "property_name": "Width",
                "property_value": "12 cm"
              },
              {
                "property_id": 2621195441,
                "property_name": "Size",
                "property_value": "Medium"
              }
            ]
          }
        ]
      }
    }]

但是这给出了空数组[]..

如何等待服务完成，然后将数据存入productList..

我需要 forEach，this.product_id.forEach(element，因为在我基于 foreach 的实际应用程序中，我将获得通过 url 发送的每个产品 ID 的产品列表。

请帮助我在发送所有产品 ID 后基于 forEach 完成整个服务后存储数据，然后获取最终产品列表..

工作 stackblitz: https://stackblitz.com/edit/flatternstructure-dvzpjv

我再次明确表示，在我的真实应用程序中，我需要传递 id 以获取 product value 之类的 https://api.myjson.com/bins/hiolc + element ..

此外，如果我得到最终的 productList，那么我需要使用最终的 productList 执行其他功能，所以我只希望最后在 productList 中而不是在 forEach 中完成数据..

Answer 1

使用 rxjs.concat :

[编辑]

在 stackblitz 上可用

...
import { concat } from 'rxjs';
import { map } from 'rxjs/operators';
...

ngOnInit() {
  this.productList = [];
  concat(
    this.product_id.map(
      element => this.httpClient.get('https://api.myjson.com/bins/hiolc')
    )
  ).pipe(
    map((res: any) => this.productList = this.productList.concat(res.products))
  ).subscribe(res => {
    console.log(res);
    console.log(this.productList);
  });
}

希望对您有所帮助。