Angular开发：如何对数组同名数据的sum值求和分组？求助

错误原因分析 #

你遇到的Cannot read property 'push' of undefined错误，核心原因是sums变量未初始化。在TypeScript中，仅声明类型sums = number[];并不会创建空数组，此时sums的值为undefined，调用push方法自然会报错。正确的声明方式应为sums: number[] = [];，labels同理。

此外，你当前的汇总逻辑存在逻辑错误：forEach中的i是数组的遍历索引，和labels的索引并不匹配，无法实现按name分组汇总的效果。

最优实现方案 #

推荐使用reduce方法进行分组汇总，这是处理此类分组统计场景的高效方案，步骤如下：

1. 按name分组，累计每个name对应的sum值（自动忽略null）
2. 从分组结果中提取labels和sums数组

修正后的完整代码 #

interface FinancesUI {
  timestamp: string;
  management: ProductUI[];
}

interface ProductUI {
  id: number;
  name: string;
  sum: number | null; // 修正类型，匹配原数据中存在null的情况
}

finances: FinancesUI;
labels: string[] = []; // 初始化空数组
sums: number[] = []; // 初始化空数组

ngOnInit() {
  this.financesService.getProducts()
    .subscribe({
      next: (financesUI: FinancesUI) => {
        this.finances = financesUI;
        
        // 1. 分组汇总sum值
        const sumMap = this.finances.management.reduce((acc, item) => {
          // 忽略sum为null的条目
          if (item.sum === null) return acc;
          
          // 若当前name未在累加对象中，初始化值为0
          if (!acc[item.name]) {
            acc[item.name] = 0;
          }
          acc[item.name] += item.sum;
          return acc;
        }, {} as Record<string, number>);
        
        // 2. 提取最终需要的labels和sums数组
        this.labels = Object.keys(sumMap);
        this.sums = Object.values(sumMap);
      }, 
      error: (error) => {
        // 错误处理逻辑
      }
    });
}

代码说明 #

• 类型修正：将ProductUI中的sum类型改为number | null，匹配原数据中存在null的情况，避免类型校验报错。
• reduce分组：reduce方法遍历数组，用对象acc存储每个name对应的累计sum，遇到null直接跳过。
• 结果提取：通过Object.keys和Object.values直接从分组对象中获取最终需要的labels和sums数组，逻辑简洁高效。

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