Angular中如何在AG Grid映射API返回的嵌套JSON字段？

嗨，我之前在项目里也碰到过一模一样的嵌套字段展示需求，AG Grid其实提供了两种很实用的方案来解决这个问题，帮你整理一下：

方案1：直接使用点符号字段路径 #

AG Grid的field属性本身就支持嵌套字段的路径写法，只要你的行数据结构里存在对应的嵌套层级，直接把field设置成'portfolio.x.y'这种点连接的路径就行，AG Grid会自动帮你解析取值。

比如修改你的columnDefs：

columnDefs = [
  { headerName: 'Funds #', field: 'portfolioId', filter: false, sorting: false },
  { headerName: 'Short Name', field: 'portfolioName', filter: false, sorting: false },
  // 新增嵌套字段列示例
  { headerName: '嵌套字段Y', field: 'portfolio.x.y', filter: false, sorting: false }
];

方案2：用valueGetter自定义取值逻辑 #

如果你的嵌套层级比较复杂，或者需要处理某个层级可能为null/undefined的情况（避免报错），推荐用valueGetter函数来手动控制取值逻辑，还能加一些额外的兜底处理。

比如用可选链操作符（?.）防止空值报错：

columnDefs = [
  { headerName: 'Funds #', field: 'portfolioId', filter: false, sorting: false },
  { headerName: 'Short Name', field: 'portfolioName', filter: false, sorting: false },
  // 用valueGetter处理嵌套字段
  { 
    headerName: '嵌套字段Y', 
    filter: false, 
    sorting: false,
    valueGetter: (params) => {
      // 可选链操作符确保某个层级为空时不会抛出错误，还能加兜底文本
      return params.data?.portfolio?.x?.y || '无数据';
    }
  }
];

额外提醒：你的HTTP请求需要订阅才能拿到数据 #

另外注意你原来的代码里，http.get返回的是Observable，直接赋值给myData是拿不到实际数据的，需要订阅后把数据赋值给AG Grid的rowData（你还需要在组件里定义这个变量）：

修改后的ngOnInit示例：

rowData: any[] = []; // 定义rowData变量，绑定到AG Grid的[rowData]属性

ngOnInit(){
  this.http.get('https://aswsfl29sit.fmrco.com:22933/CCService/resource/projectedcashdetails/3?offsetNumber=0&json=true')
    .subscribe((response: any) => {
      // 注意：这里要根据API返回的实际结构来取数组，比如如果返回的是{ data: [...] }，就取response.data
      this.rowData = response;
      console.log('获取到的数据：', this.rowData);
    });
}

然后在你的模板文件（lists.component.html）里，确保AG Grid组件绑定了rowData：

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

这样就能正常显示嵌套字段的内容啦！

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