如何在Angular的agGrid表中为以下给定的rowData创建列？答案

【问题标题】：How to create a column for below given rowData in agGrid table in Angular?如何在Angular的agGrid表中为以下给定的rowData创建列？
【发布时间】：2020-11-02 15:20:32
【问题描述】：

如何在 Angular 的 agGrid 表中为以下给定的 rowData 创建一个 column，它将自行呈现 address 列？ Image URL - Example table

  columnDefs = [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      {make: 'Toyota', model: 'Celica', price: 35000, address: [{name: 'Showroom 1', city: 'Miami', ZIP: 67202}, {name: 'Showroom 2', city: 'Mesa', ZIP: 67204}]},
      {make: 'Ford', model: 'Mondeo', price: 32000, address: [{name: 'Showroom 1', city: 'Fresno', ZIP: 67203}, {name: 'Showroom 2', city: 'Oakland', ZIP: 67205}]},
      {make: 'Porsche', model: 'Boxter', price: 72000, address: [{name: 'Showroom 1', city: 'Kansas City', ZIP: 67201}, {name: 'Showroom 2', city: 'Long Beach', ZIP: 67206}]}

【问题讨论】：

你有一个地址数组。请说明您的要求。你想如何在 UI 上表示它？您想要不同的地址显示不同的列还是要显示在单个列中？
@DurgeshPal - 我希望我的表格以我在以下 URL 中添加的格式显示。 i.stack.imgur.com/SRT1w.png
那么您找到解决方案或需要帮助了吗？
还不完全是。我使用带有硬编码索引的 setterValue 方法，因为我的列数较少。
我已经分享了下面的解决方案。

标签： angular ag-grid ag-grid-angular

【解决方案1】：

希望这会有所帮助。相应地更新它。

  columnDefs = [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'},
    {
      headerName: 'Address', field: 'address',
      cellRenderer: (params) => {
         let cellContent = '<ol>';
         for (var i = 0; i < params.value.length; i++) {
             cellContent += `<li>${params.value[i].name}, ${params.value[i].city}</li>`;
         }
         cellContent += '</ol>';
     }
    }
  ];

【讨论】：

【解决方案2】：

为了在陈列室 1 和陈列室 2 中显示地址，您必须使用列组。下面的代码将帮助您在陈列室中显示城市和邮编。在您的 columnDefs 中添加这些列对象。

{
        headerName: "Showroom 1",
        children: [
          {
            headerName: "City",
            field: "address",
            valueFormatter: param => param.data.address[0].city
          },
          {
            headerName: "Zip",
            field: "address",
            valueFormatter: param => param.data.address[0].ZIP
          }
        ]
      },
      {
        headerName: "Showroom 2",
        children: [
          {
            headerName: "City",
            field: "address",
            valueFormatter: param => param.data.address[1].city
          },
          {
            headerName: "Zip",
            field: "address",
            valueFormatter: param => param.data.address[1].ZIP
          }
        ]
      }

【讨论】：