Angular中Observable求和变为字符串拼接问题求助

问题根源在于混淆了RxJS的reduce操作符和数组的reduce方法：

• 你的map操作已经将单个country对象转换为medalsCount数组（如[20,17,17]），这个数组是Observable流中的单个值。
• RxJS的reduce是用来处理流中多个连续值的累加，此时它会把初始值0和数组直接相加，JavaScript中数字与数组相加会隐式转为字符串拼接，导致输出020,17,17。

修正后的服务代码 #

getMedalsPerCountry(id: number): Observable<number> {
  return this.getCountry(id).pipe(
    map((country: any) => 
      // 使用数组的reduce方法直接对medalsCount数组求和
      country.participations.reduce((total: number, participation: any) => total + participation.medalsCount, 0)
    )
  );
}

逻辑说明 #

1. getCountry(id)返回单个country对象的Observable
2. 在map操作内部，调用participations数组的reduce方法，遍历每一项累加medalsCount，初始值设为0，最终得到数字类型的总和
3. 修正后Observable输出的是正确的求和结果（如20+17+17=54），组件订阅后会输出数字，HTML中可通过async管道直接展示：

Total Medals: {{ tot$ | async }}

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