Angular/RxJS中如何合并两个Observable？数组需排序吗？

嘿，针对你的问题，我来一步步给你解决～

一、用RxJS的forkJoin合并两个请求 #

既然你需要等待两个HTTP请求都完成后再处理数据，forkJoin是最适合的选择——它会在所有传入的Observable都完成时，返回一个包含各请求结果的数组，完美匹配你的场景。

具体代码实现： #

import { forkJoin } from 'rxjs';
import { catchError } from 'rxjs/operators';

// ...

ngOnInit() {
  // 同时发起两个请求，等待两者都完成
  forkJoin([
    this.myService.getMap(),
    this.systemMapService.getAssets()
  ]).pipe(
    // 别忘了添加错误处理，避免请求失败时组件挂掉
    catchError((error) => {
      console.error('请求出错了:', error);
      throw error; // 也可以根据业务需求返回默认值
    })
  ).subscribe(([mapFiles, assetFiles]) => {
    // 先对两个数组按文件名中的数字后缀排序，确保对应关系正确
    const sortedMaps = this.sortFilesByNumber(mapFiles);
    const sortedAssets = this.sortFilesByNumber(assetFiles);

    // 创建一个合并后的数组，让每个SVG文件对应到它的JSON映射文件
    this.mappedResources = sortedAssets.map((asset, index) => ({
      svgPath: sortedMaps[index],
      mappingFile: asset
    }));
  });
}

// 辅助函数：按文件名里的数字后缀排序（比如map-0.svg排在map-1.svg前面）
private sortFilesByNumber(files: string[]): string[] {
  // 先复制数组避免修改原数据
  return [...files].sort((a, b) => {
    // 提取文件名中的数字部分（比如从"map-mapping-1.json"中拿到1）
    const numA = this.extractNumberFromFileName(a);
    const numB = this.extractNumberFromFileName(b);
    
    return numA - numB; // 按数字从小到大排序
  });
}

private extractNumberFromFileName(filename: string): number {
  const match = filename.match(/\d+/);
  // 如果没找到数字，返回0避免排序出错
  return match ? parseInt(match[0], 10) : 0;
}

二、关于数组排序的必要性 #

必须排序！ 你提到后端返回的数组是未排序的，这意味着默认的数组顺序完全无法保证map-0.svg和map-mapping-0.json处于同一索引位置。只有通过提取文件名中的数字后缀进行排序，才能确保每个SVG文件和它对应的JSON映射文件一一匹配。

举个例子：

• 原SVG数组["map-1.svg", "map-0.svg"]会被排序为["map-0.svg", "map-1.svg"]
• 原JSON数组["map-mapping-1.json", "map-mapping-0.json"]会被排序为["map-mapping-0.json", "map-mapping-1.json"]

这样排序后，两个数组的索引就能完美对应上了。

三、调整模板代码 #

用合并后的mappedResources数组来渲染模板，逻辑会更清晰，也能避免索引不匹配的问题：

<mat-tab-group mat-align-tabs="end">
  <mat-tab *ngFor="let resource of mappedResources; let i = index" label="{{i}}">
    <div class="container">
      <div class="map">
        <!-- 加载对应的SVG文件 -->
        <img id="img_equipment" [src]="apiUrl + '/path/to/svg/' + resource.svgPath">
        <!-- 这里假设你已经加载了resource.mappingFile对应的JSON数据到resource.links中 -->
        <!-- 如果需要动态请求JSON文件，可以结合async管道或者在组件中提前处理 -->
        <a *ngFor="let link of resource.links" 
           title="{{ link.title }}" 
           class="ink" 
           [ngStyle]="{ left: link.left, top: link.top, width: link.width }">
        </a>
      </div>
    </div>
  </mat-tab>
</mat-tab-group>

如果你的JSON映射文件需要额外请求加载，可以在合并数组后，再用forkJoin发起每个JSON的请求，比如：

// 在subscribe里添加：
const mappingRequests = sortedAssets.map(asset => 
  this.http.get(`${apiUrl}/path/to/json/${asset}`)
);

forkJoin(mappingRequests).subscribe(mappingDataList => {
  this.mappedResources = sortedMaps.map((svg, index) => ({
    svgPath: svg,
    links: mappingDataList[index]
  }));
});

这样就能直接在模板里使用resource.links了～

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