如何结合forkJoin与async pipe按ID合并两个Observable数组？

是的，你需要使用map操作符来处理forkJoin返回的两个数组结果，将它们按ID合并。以下是具体实现步骤：

1. 修改TypeScript代码 #

forkJoin会把两个Observable的结果以数组形式返回（即[arrayOne, arrayTwo]），我们需要通过map操作符对这两个数组进行合并处理：

import { forkJoin, map } from 'rxjs';

// ...

combinedResults$ = forkJoin([this.arrayOne$, this.arrayTwo$]).pipe(
  map(([arrayOne, arrayTwo]) => {
    // 将第二个数组转为以id为键的对象，方便快速查找
    const ageMap = arrayTwo.reduce((acc, item) => {
      acc[item.id] = item.age;
      return acc;
    }, {} as Record<number, number>);
    
    // 遍历第一个数组，合并对应的age属性
    return arrayOne.map(item => ({
      ...item,
      age: ageMap[item.id]
    }));
  })
);

2. 优化HTML代码 #

原代码中多次使用async管道会导致重复订阅，建议使用as语法将订阅结果赋值给变量，同时调整判断逻辑：

<div *ngIf="combinedResults$ | async as results">
  <p>以下是合并后的列表项：</p>
  <ul *ngIf="results.length > 0">
    <li *ngFor="let item of results">
      ID: {{item.id}}<br />
      Name: {{item.name}}<br />
      Age: {{item.age}}
    </li>
  </ul>
  <p *ngIf="results.length === 0">暂无数据</p>
</div>

代码说明 #

• forkJoin：等待两个Observable都完成后，返回它们的结果数组。
• map操作符：接收forkJoin的结果，先将第二个数组转换为ID到年龄的映射对象，然后遍历第一个数组，将每个对象与对应的年龄属性合并。
• async as results：一次性订阅Observable并将结果赋值给results变量，避免重复订阅。

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