如何在 Angular 中实现嵌套结构的表格（含分组标题与子行）-html教程-PHP中文网

如何在 Angular 中实现嵌套结构的表格（含分组标题与子行）

本文介绍一种不依赖传统标签、而是基于 Bootstrap 网格系统构建“类表格”布局的实用方案，适用于 Angular 项目中需要展示分组式嵌套数据（如带标题的子表区域）的场景。

本文介绍一种不依赖传统 `

` 标签、而是基于 bootstrap 网格系统构建“类表格”布局的实用方案，适用于 angular 项目中需要展示分组式嵌套数据（如带标题的子表区域）的场景。

在 Angular 中直接使用 HTML

实现真正意义上的“表格内嵌套表格”（尤其是带跨行分组标题、动态子项列表）往往会导致语义混乱、样式难以控制，且 rowspan/colspan 在复杂嵌套下极易出错。一个更灵活、可维护性更强的替代方案是：放弃原生 table 语义，改用语义化容器 + Bootstrap Grid 布局模拟表格视觉结构。

该方法核心思路是：

使用 .row 模拟表格行；
使用 .col-* 模拟单元格，并通过统一列宽保证对齐；
用独立的 .row 区块作为分组标题（如 FirstName: John），再用嵌套的 .list 容器包裹其下属子行；
所有结构均支持 Angular 的 *ngFor 动态渲染，便于绑定数组数据。

以下为 Angular 组件模板中的推荐写法（已适配 Angular 16+）：

<!-- app.component.html -->
<div class="container-fluid p-0">
  <!-- 表头 -->
  <div class="row bg-light border-bottom fw-bold">
    <div class="col-md-6">Name</div>
    <div class="col-md-2">Age</div>
  </div>

  <!-- 分组循环 -->
  <ng-container group of datagroups let i='index"'><!-- 分组标题行 --><div class="row bg-secondary text-white py-2 px-3">
      <div class="col-md-8">{{ group.title }}</div>
    </div>

    <!-- 子项列表 -->
    <div class="list-group"> 0">
      <div class="row border-bottom py-1" item of group.items let j='index"'>
        <div class="col-md-6">{{ j + 1 }}. {{ item.name }}</div>
        <div class="col-md-2">{{ item.age }}</div>
      </div>
    </div>
  </ng-container>
</div>

配套组件 TypeScript 数据结构示例：

Batch GPT

一款AI开发辅助工具，主要用于使用AI批量处理数据、自动执行任务，适合需要提升相关任务效率的用户。

下载

// app.component.ts
export interface Person {
  name: string;
  age: number;
}

export interface Group {
  title: string;
  items: Person[];
}

export class AppComponent {
  dataGroups: Group[] = [
    {
      title: 'FirstName: John',
      items: [
        { name: 'John Antony', age: 19 },
        { name: 'John Bob', age: 29 }
      ]
    },
    {
      title: 'FirstName: Alice',
      items: [
        { name: 'Alice Chen', age: 25 },
        { name: 'Alice Lee', age: 31 }
      ]
    }
  ];
}

✅ 关键优势：