Angular 2中按ID汇总JSON列值并在UI展示的实现方案

看起来你已经搞定了分组的第一步，但totalsalary的计算还没到位——你现在只是把group的ID直接赋值给它了，没有真正实现求和逻辑。别担心，用reduce方法就能轻松解决这个问题，它可以帮你快速累加筛选后数据里的薪资总和。

修改你的现有代码 #

你只需要在filter筛选出目标组数据后，用reduce来计算薪资总和，调整后的代码如下：

var groups = new Set(this.payments.map(item => item.group));
this.columnData = [];

groups.forEach(g => {
  // 先筛选出当前group对应的所有数据
  const groupPayments = this.payments.filter(i => i.group === g);
  // 用reduce累加薪资总和，记得把item.salary替换成你实际的薪资字段名
  const totalSalary = groupPayments.reduce((sum, item) => sum + (item.salary || 0), 0);
  
  this.columnData.push({
    workerID: g,
    totalsalary: totalSalary, // 这里替换为计算后的总和
    values: groupPayments
  });
});

性能优化版（推荐） #

如果你的payments数据量较大，多次调用filter会重复遍历整个数组，有点浪费性能。可以用reduce一步完成分组和求和，只需要遍历数组一次，效率更高：

this.columnData = Object.values(this.payments.reduce((acc, item) => {
  const group = item.group;
  // 如果当前组还未初始化，先创建基础结构
  if (!acc[group]) {
    acc[group] = {
      workerID: group,
      totalsalary: 0,
      values: []
    };
  }
  // 累加当前项的薪资，||0避免undefined/null导致NaN
  acc[group].totalsalary += item.salary || 0;
  // 收集当前组的所有数据
  acc[group].values.push(item);
  
  return acc;
}, {}));

小提示 #

• 一定要把代码里的item.salary替换成你实际的薪资字段名，比如如果字段叫monthlyPay就改成对应的名称。
• 加上|| 0是为了处理薪资字段可能为空的情况，避免计算出现NaN，让逻辑更健壮。

内容的提问来源于stack exchange，提问作者Ravi kumar Surapati