为从另一个服务中找到的每个元素调用服务，然后用结果填充数组

Question

问题：尝试使用两个服务填充html表。首先，我正在调用一项服务来检索所有产品。然后，对于每个元素，我正在调用另一个接受fabricplanid作为参数并返回对象（如果存在）的服务。如果存在，则将其推入数组，但如果返回错误404，则将字符串推入同一数组。我面临的问题是数组中的值与产品的相应fabricPlanId不匹配。

这是product.component.ts文件，在调用该文件时，将执行此服务并使用ngfor填充表。

products:Product[];

  //view
  fabricplan: Fabricplan[];
  plan_desc: Array<String> = [];

  //view select
  fabricplans: Fabricplan[];



ngOnInit() {

this.productservice.getProducts().subscribe(products => {
    this.products = products;
    console.log("Produtos", this.products);

    this.products.forEach( element => {
      console.log(element.fabricPlanId);
      this.fabricplanservice.getfabricplan(element.fabricPlanId).subscribe(
        (response) => {
          this.fabricplan = response;
          this.plan_desc.push(this.fabricplan['description']);
        },
        (error) => {
          if(error.status === 404){
            this.plan_desc.push('No fabric plan');
          }
        });
      });
  });

 console.log("Planos de fabrico", this.plan_desc);
}

product.component.html文件

 <table class="table table-hover">
      <thead class="thead-dark">
          <tr>
            <th scope="col">Number</th>
            <th scope="col">Fabric Plan</th>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col">Price €</th>
            <th scope="col">Ative</th>
          </tr>
      </thead>
      <tbody>
          <tr scope="row" id="table" *ngFor="let product of products let i = index"(click)="open(content, product.id)">
           <td>{{ i+1 }}</td>
           <td>{{ plan_desc[i] }}</td>
           <td>{{ product?.name }}</td>
           <td>{{ product?.description }}</td>
           <td>{{ product?.price }}</td>
           <td>{{ product?.active }}</td>
         </tr>
      </tbody>
   </table>

响应正文

产品

{
active: true,
description: " descrição do prod 1",
fabricPlanId: 1,
id: 1,
name: "Produto 1",
price: 1
}

FabricPlans

{
dateStart: "2019-10-30T00:00:00"
description: "Descrição do plano 1"
id: 1
operationsIds: [1, 2]
}

Answer 1

根据您的评论，plan_desc是随机排列的。原因是

this.products.forEach( element => { 
      this.fabricplanservice.getfabricplan(element.fabricPlanId).subscribe(
    ...

您无法控制每个请求将花费多长时间，因此有些请求会更快地返回，有些请求会稍后，并且每当它们返回时，它们就会被添加到列表中->顺序是随机的。

但是，很容易对每个项目进行请求，然后使用rxjs forkjoin获取列表顺序>

forkjoin
（（我在这里写了他的代码）