ag-grid-angular树形数据重复条目不显示问题求助

报错原因 #

控制台报错AG Grid: duplicate group keys for row data, keys should be unique且仅显示5条数据，核心原因是：前两条数据的orgHierarchy均为['ALDI #60']，AG Grid树形模式下默认通过getDataPath返回的路径生成组键，重复的组键会被判定为同一节点，导致其中一条数据被过滤。

解决方案 #

以下两种方案任选其一即可：

方案1：修改树形路径，确保每个路径唯一 #

在转换数据时，将每条数据的唯一id追加到orgHierarchy数组末尾，让每条数据的树形路径具备唯一性。修改你的TS转换代码：

private convertDataToGridData(data) {
  let finalValue = []; // 初始化数组（原代码可能遗漏此步骤）
  let finalResult = data;
  for (const item of finalResult) {
      const orgHierarchy = item.orgHierarchy;
      const hierarchyLength = orgHierarchy.length;
      let accessLevelStatus = item.accessLevelStatus;
      if (accessLevelStatus === "Parent Owner") {
        accessLevelStatus = "Owner";
      }
      // 核心修改：将id追加到路径末尾，保证路径唯一
      const uniqueHierarchy = [...orgHierarchy, item.id.toString()];
      if (hierarchyLength === 1 || hierarchyLength === 2) {
        finalValue.push({
          accessLevelStatus: accessLevelStatus,
          address: item.address,
          businessModels: item.businessModels,
          count: item.count,
          orgHierarchy: uniqueHierarchy,
          id: item.id,
        });
      } else if (hierarchyLength >= 3) {
        finalValue.push({
          accessLevelStatus: accessLevelStatus,
          address: item.address,
          businessModels: item.businessModels,
          count: item.count,
          id: item.id,
          orgHierarchy: [orgHierarchy[0], orgHierarchy[hierarchyLength - 1], item.id.toString()],
        });
      }
    }
    this.profileListing = finalValue;
    console.log(this.profileListing,"profileListing")
}

方案2：配置getRowId指定唯一行标识 #

直接告诉AG Grid用数据的id作为每行的唯一标识，忽略组路径重复问题：

1. 在HTML的ag-grid-angular标签中添加[getRowId]="getRowId"：

<div class="grid-style">
  <ag-grid-angular 
    style="width: 100%; height: 350px; overflow: auto;box-shadow: 0px 2px 8px rgba(112, 112, 112, 0.2);border-radius: 0px 0px 8px 8px;" 
    class="ag-theme-alpine profile-listing" 
    [columnDefs]="columnDefs" 
    [defaultColDef]="defaultColDef" 
    [autoGroupColumnDef]="autoGroupColumnDef" 
    [rowData]="rowData"
    [rowSelection]="rowSelection" 
    [treeData]="true" 
    [animateRows]="true" 
    [getDataPath]="getDataPath"
    [getRowId]="getRowId" <!-- 添加此行 -->
    (gridReady)="onGridReady($event)" 
    [headerHeight]="0" 
    (selectionChanged)="onSelectionChanged($event)" 
    [frameworkComponents]="frameworkComponents" 
    [overlayNoRowsTemplate]="noRowsTemplate" 
    [domLayout]="'autoHeight'">
  </ag-grid-angular>
</div>

2. 在TS代码中定义getRowId函数：

getRowId(params) {
  return params.data.id.toString(); // 用唯一id作为行标识
}

两种方案均可解决重复组键问题，让6条数据全部显示在表格中。

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