如何在Angular的*ngFor循环中触发获取系统位置的网络请求？

没问题，我来帮你搞定怎么把map处理后的数组和forkJoin结合起来，实现你要的在列表加载时获取系统位置的需求～

核心思路 #

forkJoin的优势是可以并行发起多个Observable请求，等所有请求都完成后一次性拿到结果。我们的目标是：先把每个文档类型下的系统对应的位置请求整理成Observable数组，用forkJoin批量执行，最后把请求结果和原文档类型、系统数据关联起来，供*ngFor遍历展示。

具体实现步骤 #

1. 整理请求并关联原数据

假设你有一个获取系统位置的服务方法（比如systemService.getSystemLocation(systemId)），返回Observable<Location>。我们可以用map遍历this.doctypes，为每个系统生成带关联信息的请求：

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

// 先为每个文档类型下的系统创建位置请求，同时保留原数据关联
const docTypeRequests = this.doctypes.map(docType => {
  // 对当前文档类型下的每个系统发起位置请求
  const systemLocationRequests = docType.systems.map(system => 
    this.systemService.getSystemLocation(system.id).pipe(
      // 把位置结果和原文档类型、系统数据绑定
      map(location => ({
        docTypeTitle: docType.title,
        systemName: system.name,
        location: location
      })),
      // 处理单个请求失败的情况，返回默认值避免整体失败
      catchError(() => of({
        docTypeTitle: docType.title,
        systemName: system.name,
        location: { address: '位置获取失败' }
      }))
    )
  );
  // 用forkJoin执行当前文档类型下的所有系统位置请求
  return forkJoin(systemLocationRequests);
});

// 执行所有文档类型的请求
forkJoin(docTypeRequests).pipe(
  // 把嵌套的结果数组展开成一维数组，方便后续整理
  mergeAll()
).subscribe(allResults => {
  // 把结果整理成适合*ngFor展示的结构
  this.displayData = allResults.reduce((acc, item) => {
    // 查找当前文档类型是否已存在于整理好的数组中
    const existingDoc = acc.find(doc => doc.title === item.docTypeTitle);
    if (existingDoc) {
      // 存在则追加系统及位置信息
      existingDoc.systems.push({
        name: item.systemName,
        location: item.location
      });
    } else {
      // 不存在则新建文档类型条目
      acc.push({
        title: item.docTypeTitle,
        systems: [{ name: item.systemName, location: item.location }]
      });
    }
    return acc;
  }, []);
});

2. 在模板中用*ngFor遍历展示

现在displayData已经包含了所有文档类型、系统及对应位置信息，直接在模板里循环即可：

<table>
  <thead>
    <tr>
      <th>文档类型</th>
      <th>关联系统</th>
      <th>系统位置</th>
    </tr>
  </thead>
  <tbody>
    <!-- 用ng-container包裹外层循环，避免生成多余DOM -->
    <ng-container *ngFor="let docType of displayData">
      <tr *ngFor="let system of docType.systems">
        <td>{{ docType.title }}</td>
        <td>{{ system.name }}</td>
        <td>{{ system.location.address }}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

额外提示 #

• 如果希望请求发起后立刻更新视图（不用等所有请求完成），可以把forkJoin换成merge，但这样是并行处理且会逐个发射结果，需要调整后续的结果整理逻辑。
• 记得在组件销毁时取消订阅，避免内存泄漏，比如用takeUntil操作符结合ngOnDestroy生命周期钩子。

内容的提问来源于stack exchange，提问作者cfoster5