Angular 13中Ag-Grid复杂对象分组实现求助

针对你需要按主对象name分组、子对象models单独列展示的需求，直接按以下步骤实现：

1. 数据扁平化预处理 #

Ag-Grid的分组依赖结构化的单条数据，先把嵌套的models数组展开，让每个车型对应一条包含主品牌信息的记录：

// 原数据
const originalData = [
  {
    "id": 1,
    "name": "BMW",
    "models": [
      {"id": 5777, "name": "3 Series"},
      {"id": 5776, "name": "5 Series"},
      {"id": 5775, "name": "X5"}
    ]
  },
  {
    "id": 2,
    "name": "Mercedes-Benz",
    "models": [
      {"id": 6777, "name": "C-Class"},
      {"id": 6776, "name": "E-Class"},
      {"id": 6775, "name": "GLE"}
    ]
  }
];

// 扁平化处理函数
flattenData(data: any[]) {
  return data.flatMap(brand => 
    brand.models.map(model => ({
      brandId: brand.id,
      brandName: brand.name,
      modelId: model.id,
      modelName: model.name
    }))
  );
}

// 在组件中初始化处理后的数据
this.gridData = this.flattenData(originalData);

2. Ag-Grid 核心配置 #

在组件中配置gridOptions，指定分组字段、列定义及分组行为：

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-brand-grid',
  templateUrl: './brand-grid.component.html',
  styleUrls: ['./brand-grid.component.scss']
})
export class BrandGridComponent {
  gridOptions: GridOptions = {
    // 默认展开所有分组
    groupDefaultExpanded: 1,
    // 配置分组列的显示
    autoGroupColumnDef: {
      headerName: '品牌',
      field: 'brandName',
      cellRendererParams: {
        suppressCount: true // 隐藏分组后的数量统计（可选）
      }
    },
    // 列定义
    columnDefs: [
      {
        headerName: '车型',
        field: 'modelName',
        sortable: true,
        filter: true
      }
    ],
    // 指定分组字段
    rowGroupPanelShow: 'always',
    groupKeys: ['brandName']
  };

  gridData: any[];

  ngOnInit() {
    const originalData = [/* 你的原数据 */];
    this.gridData = this.flattenData(originalData);
  }

  flattenData(data: any[]) {
    return data.flatMap(brand => 
      brand.models.map(model => ({
        brandId: brand.id,
        brandName: brand.name,
        modelId: model.id,
        modelName: model.name
      }))
    );
  }
}

3. 模板文件配置 #

在组件模板中引入Ag-Grid组件并绑定数据和配置：

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [gridOptions]="gridOptions"
  [rowData]="gridData"
>
</ag-grid-angular>

4. 可选样式调整 #

如果需要自定义分组行的样式，在组件样式文件中添加：

.ag-theme-alpine .ag-row-group {
  font-weight: bold;
  background-color: #f5f5f5;
}

这样就能实现按品牌名称分组，每个分组下展示对应的车型列，和你预期的效果一致。

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