Angular表格重复显示国家问题：实现国家分组展示方案

要实现按国家分组展示金融工具数据，核心思路是先在组件内对数据源按国家分组，再在模板中利用表格的rowspan属性让国家单元格跨多行显示，具体步骤如下：

1. 组件内预处理数据（按国家分组） #

在组件的逻辑文件（.ts）中，使用数组的reduce方法将原始数据按pays字段分组，生成「国家+对应金融工具列表」的结构化数据：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 原始数据源
  REGROUPEMENT = [
    { pays: 'France', element: 'Action X', valeur: 100 },
    { pays: 'France', element: 'Obligation Y', valeur: 200 },
    { pays: 'Allemagne', element: 'Action Z', valeur: 150 },
    { pays: 'Espagne', element: 'Fonds A', valeur: 300 },
    { pays: 'Espagne', element: 'Obligation B', valeur: 250 }
  ];
  
  // 分组后的数据结构
  groupedData: { pays: string, elements: typeof this.REGROUPEMENT[0][] }[] = [];

  ngOnInit() {
    // 按国家分组
    const groupedObj = this.REGROUPEMENT.reduce((acc, item) => {
      if (!acc[item.pays]) {
        acc[item.pays] = { pays: item.pays, elements: [] };
      }
      acc[item.pays].elements.push(item);
      return acc;
    }, {} as Record<string, typeof this.groupedData[0]>);
    
    // 将对象转为数组，方便模板循环
    this.groupedData = Object.values(groupedObj);
  }
}

2. 修改Angular模板，实现分组展示 #

在模板文件（.html）中，通过嵌套循环渲染分组后的数据，利用rowspan让国家单元格仅在每组第一行显示，并跨占该组所有行的高度：

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>Pays</th>
      <th>Élément financier</th>
      <th>Valeur</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环每个国家分组 -->
    <ng-container *ngFor="let countryGroup of groupedData">
      <!-- 循环当前国家下的所有金融工具 -->
      <tr *ngFor="let item of countryGroup.elements; let i = index">
        <!-- 仅在每组第一行渲染国家单元格，rowspan设置为组内元素数量 -->
        <td *ngIf="i === 0" [attr.rowspan]="countryGroup.elements.length">
          {{ countryGroup.pays }}
        </td>
        <td>{{ item.element }}</td>
        <td>{{ item.valeur }}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

关键说明 #

• rowspan属性：确保国家单元格的高度覆盖该组所有金融工具的行，避免重复显示国家名称。
• ng-container：作为逻辑容器，仅用于循环控制，不会生成额外的DOM元素，保证表格结构的正确性。
• 数据分组：提前在组件内处理数据，避免模板中做复杂逻辑，符合Angular的「逻辑与视图分离」原则。

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