我读了很多关于 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。 谢谢你。
如果我清楚地理解您的要求,那么您可以这样做,
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
});
}
);
}
});
});
}