Angular 13中实现重复数据合并列的*ngFor循环绑定问题

步骤1：组件内数据分组处理 #

在组件类中添加计算属性，将原始数据按OrganisationName分组：

get groupedSalaryDetails() {
  const groups = {};
  this.VUGSalaryDetails.forEach(item => {
    if (!groups[item.OrganisationName]) {
      groups[item.OrganisationName] = [];
    }
    groups[item.OrganisationName].push(item);
  });
  return Object.entries(groups).map(([orgName, items]) => ({
    orgName,
    items
  }));
}

步骤2：修改模板实现单元格合并 #

更新表格模板，通过分组数据循环并设置rowspan实现合并：

<table class="custom-table">
  <thead>
    <tr>
      <td colspan="2">&nbsp;</td>
      <th colspan="3" scope="colgroup" class="text-center">{{'JobAllowanceperMonth.JobAllowanceperMonth' | translate}}</th>
    </tr>
    <tr>
      <th scope="col">{{ 'Organization.Organization' | translate}}</th>
      <th scope="col">{{ 'AttendancebenifitperDay.AttendancebenifitperDay' | translate}}</th>
      <th scope="col">{{ 'Step01.Step01' | translate}}</th>
      <th scope="col">{{ 'Step02.Step02' | translate}}</th>
      <th scope="col">{{ 'Step03.Step03' | translate}}</th>                    
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let group of groupedSalaryDetails">
      <tr *ngFor="let item of group.items; let i = index">
        <th *ngIf="i === 0" scope="row" [attr.rowspan]="group.items.length">
          {{ group.orgName }}
        </th>
        <th *ngIf="i !== 0" style="display: none;"></th>
        <td>00,000</td>
        <td>{{ item.Step1 }}</td>
        <td>{{ item.Step2 }}</td>
        <td>{{ item.Step3 }}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

核心逻辑说明 #

• 数据分组：将相同组织名称的条目归为一组，确保后续能准确计算合并单元格的跨行数。
• 跨行设置：每个组织的第一行单元格通过[attr.rowspan]设置跨行数量为组内条目数，实现单元格垂直合并。
• 隐藏重复单元格：同一组织下的后续行隐藏组织列单元格，避免重复显示内容。

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