如何迭代嵌套的JSON响应并在angular 6中显示为ag-grid表

npm install --save ag-grid-community ag-grid-angular

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

interface MyData {
  id: number;
  name: string;
  children?: MyData[];
}

data: MyData[];

constructor(private http: HttpClient) { }

ngOnInit() {
  this.http.get<MyData[]>('your-api-url').subscribe(data => {
    this.data = data;
  });
}

<!-- 在组件的HTML模板中 -->
<ag-grid-angular 
  style="width: 100%; height: 500px;" 
  class="ag-theme-alpine"
  [rowData]="data"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [autoGroupColumnDef]="autoGroupColumnDef"
  [groupDefaultExpanded]="groupDefaultExpanded"
  [animateRows]="true"
  [enableRangeSelection]="true"
  [pagination]="true"
  [paginationPageSize]="10"
  [getRowNodeId]="getRowNodeId"
></ag-grid-angular>

columnDefs = [
  { field: 'id' },
  { field: 'name' }
];

defaultColDef = {
  flex: 1,
  minWidth: 150,
  resizable: true
};

autoGroupColumnDef = {
  headerName: 'Group',
  minWidth: 250,
  field: 'name',
  cellRenderer: 'agGroupCellRenderer',
  cellRendererParams: {
    checkbox: true
  }
};

groupDefaultExpanded = -1;

getRowNodeId(data: MyData) {
  return data.id;
}