Ag 网格行分组 - keys.map 不是函数

Question

我在让行分组在 AG Grid 中工作时遇到问题。我正在使用文档提供的示例 here 并使用树数据示例。

我的代码与示例几乎没有变化，但我收到 keys.map is not a function 错误：

@Component({
  selector: 'my-app',
  template: `<div class="example-wrapper">
    <div style="margin-bottom: 5px;">
      <input
        type="text"
        id="filter-text-box"
        placeholder="Filter..."
        (input)="onFilterTextBoxChanged()"
      />
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [modules]="modules"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [rowData]="rowData"
      [treeData]="true"
      [animateRows]="true"
      [groupDefaultExpanded]="groupDefaultExpanded"
      [getDataPath]="getDataPath"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  </div> `,
})
export class AppComponent { 
  private gridApi!: GridApi; 

  public modules: Module[] = [ClientSideRowModelModule, RowGroupingModule];
  public columnDefs: ColDef[] = [
    // we're using the auto group column by default!
    { field: 'PY DNRev' },
    { field: 'PY vs LY DNREv Chg' },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
  };
  public autoGroupColumnDef: ColDef = {
    headerName: 'Planning Product',
    minWidth: 300,
    cellRendererParams: {
      suppressCount: true,
    },
  };
  public rowData: any[] | null = getData();
  public groupDefaultExpanded = -1;
  public getDataPath: GetDataPath = function (data) {
    return data.Parent;
  };

  onFilterTextBoxChanged() {
    this.gridApi.setQuickFilter(
      (document.getElementById('filter-text-box') as any).value
    );
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api; 
  }
}

我在这里创建了一个 plunkr 来重现我的错误：https://plnkr.co/edit/UOypa8qvYmgKwz25

它必须与数据相关，但我不明白为什么它不喜欢我提供的数据。

Answer 1

发帖 20 秒后就想通了。哈

第一个父数据元素不是数组。它只是一个字符串，它需要是一个单元素数组。

"Parent": "Total Postmix"

需要

"Parent": ["Total Postmix"]

Ag 网格行分组 - keys.map 不是函数

Ag Grid Row Grouping - keys.map is not a function

javascript

ag-grid

angular

ag-grid-angular