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

在我的角6应用程序中，我有一个product_id数组，
product_id: any = ["123", "456"];
恩戈尼特：

  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);
  }

在这里，我需要得到预期的结果，

   [{
      "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"
              }
            ]
          }
        ]
      }
    }]

但是它给出空数组[]。
如何等待服务完成，然后将数据存储到console.log(this.productList);中。
我需要for each，productList因为在基于foreach的实际应用程序中，我将获得通过url发送的每个产品id的产品列表。
请帮助我存储完成整个服务后的数据，根据this.product_id.forEach(element发送的所有产品id，然后获取最终产品列表。
工作堆闪电战：https://stackblitz.com/edit/flatternstructure-dvzpjv
再一次，我要明确的是，在我的实际应用中，我需要通过ID来获得forEach类似product value。
另外，如果我得到了finalhttps://api.myjson.com/bins/hiolc + element，那么我需要对finalproductList执行另一个功能，因此只有我希望最终在productList中得到完整的数据，而不是在productList中。

最佳答案

使用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);
  });
}

希望有帮助。