AngularJS视图中如何汇总含子项目的项目工时

你已经把项目名称的合并行处理好了，现在就差总工时列的汇总了——核心问题在于，当前你的rowspan单元格只绑定了第一个子项目的total值，而我们需要的是整个主项目下所有子项目的工时总和。下面是具体的解决步骤：

步骤1：修改JavaScript逻辑，计算项目总工时合计 #

我们需要先遍历所有记录，提前统计每个主项目的总工时，再把这个合计值绑定到该项目的第一条记录上：

// 第一步：先统计每个项目的总工时合计
const projectTotals = {};
weeklyPresences.forEach(p => {
  // 初始化当前项目的总工时计数器
  if (!projectTotals[p.projectName]) {
    projectTotals[p.projectName] = 0;
  }
  // 将子项目的total转为数值后累加，处理空值/非数值情况
  projectTotals[p.projectName] += parseFloat(p.total) || 0;
});

// 第二步：处理showProject、projectCount，同时绑定项目总合计
weeklyPresences.forEach((p, i) => {
  const differentProject = i === 0 || weeklyPresences[i - 1].projectName !== p.projectName;
  p.showProject = differentProject;
  
  if (differentProject) {
    p.projectCount = weeklyPresences.filter(pres => pres.projectName === p.projectName).length;
    // 给当前项目的第一条记录赋值总工时合计
    p.projectTotal = projectTotals[p.projectName];
  } else {
    p.projectCount = weeklyPresences[i - 1].projectCount;
    // 非第一条记录不需要显示总工时，设为null即可
    p.projectTotal = null;
  }
});

return weeklyPresences;

步骤2：更新HTML模板，绑定总合计值 #

把原来总工时列的{{p.total}}替换成我们刚计算的{{p.projectTotal}}：

<tr ng-repeat="p in vm.presences">
  <td ng-if="p.showProject" rowspan="{{p.projectCount}}">{{p.projectName}}</td>
  <td>{{p.description}}</td>
  <td>{{p.monday}}</td>
  <td>{{p.tuesday}}</td>
  <td>{{p.wednesday}}</td>
  <td>{{p.thursday}}</td>
  <td>{{p.friday}}</td>
  <td>{{p.saturday}}</td>
  <td>{{p.sunday}}</td>
  <!-- 替换为汇总后的项目总工时 -->
  <td ng-if="p.showProject" rowspan="{{p.projectCount}}">{{p.projectTotal}}</td>
</tr>

逻辑说明 #

1. 我们通过projectTotals对象先完成所有子项目的工时累加，确保不会遗漏任何一条子项目的工时数据；
2. 只有每个主项目的第一条记录会被赋值projectTotal——因为只有这条记录的总工时单元格会通过rowspan显示，其他子项目的总工时单元格会被ng-if="p.showProject"隐藏；
3. 使用parseFloat(p.total) || 0是为了避免total为空或非数值时出现NaN的情况，保证计算的准确性。

这样修改后，合并行的总工时单元格就会显示该主项目所有子项目的当周工时总和了。

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