强制对可观察值进行嵌套循环以等待所有

问题描述 投票:0回答:1

我读了很多关于 forkJoin、async、await 的内容,但最终没有找到解决方案。

组件 A 具有组件 B 的列表。组件 B 可能包含组件 C 的列表,也可能不包含。 组件 C 可能包含可由用户创建的属性列表,因此它们在编码时是未知的。

我的任务是以角度形式显示组件 C 的所有属性。必须从服务请求每个属性的名称、值和类型。 B和C的ID也必须显示。

我在代码中看到的是: 在方法“initAttibutesMap”中读取 组件 A 并循环其 B 组件; 如果 B 有 C 的列表,那么 循环遍历此 C 列表,并且对于每个 C,循环遍历其属性,发送服务请求以获取名称、值和类型。该服务返回一个可观察值。我把答案写在地图上。

我卡住了: 如何等待收到所有回复?!在识别所有属性之前,我的代码运行到循环外的下一行。

由于我每次都需要组件 B 和 C 的 ID,所以我不能只是将可观察量推入数组并稍后 forkJoin 它们。 如果我将 setTimeout 与“initAttibutesMap”一起使用 并延迟运行其他代码行,我将地图完全填满。 但我想避免 setTimeout。 谢谢你。

angular settimeout angular2-observables fork-join
1个回答
0
投票

如果我清楚地理解您的要求,那么您可以这样做,

import { forkJoin, of } from 'rxjs';
import { flatMap, map } from 'rxjs/operators';

// Assume you have a service called AttributeService to fetch attribute details

function initAttributesMap() {
  // Assuming componentA, componentB, and componentC are arrays of objects
  componentA.forEach(a => {
    // Process each component B
    a.componentBs.forEach(b => {
      // Process each component C, if available
      if (b.componentCs) {
        forkJoin(
          b.componentCs.map(c => {
            // Process each attribute of component C
            return forkJoin(
              c.attributes.map(attributeId => {
                // Fetch attribute details using a service
                return AttributeService.getAttributeDetails(attributeId).pipe(
                  map(attributeDetails => ({
                    attributeId: attributeId,
                    attributeDetails: attributeDetails
                  }))
                );
              })
            );
          })
        ).pipe(
          flatMap(attributesOfCs => attributesOfCs)
        ).subscribe(
          // Process each attribute details
          attributesOfC => {
            // attributesOfC is an array containing the attribute details of a component C
            attributesOfC.forEach(attribute => {
              // Process each attribute detail here
              const componentBId = b.id;
              const componentCId = /* get component C id */;
              const attributeId = attribute.attributeId;
              const attributeDetails = attribute.attributeDetails;
              
              // Store or process the attribute details as needed
            });
          }
        );
      }
    });
  });
}
  1. 我们循环遍历每个组件 A,然后循环每个组件 B,然后循环每个组件 C(如果可用)。
  2. 对于每个组件 C,我们使用 forkJoin 等待获取所有属性详细信息,然后再继续。
  3. 然后,我们使用 flatMap 将属性详细信息数组的数组展平为单个可观察流。
  4. 最后,我们订阅扁平化的可观察流来处理每个属性细节。
© www.soinside.com 2019 - 2024. All rights reserved.