如何在角度 ag 网格中显示子数组答案

【问题标题】：How to display the child array in angular ag grid如何在角度 ag 网格中显示子数组
【发布时间】：2020-10-05 14:22:59
【问题描述】：

代码如下：

rowData = [{
 room: 'Room 1',
 data: [{ 
  name: 'justin'
 },{
  name: 'josh'
 }];
},{
 room: 'Room 2',
 data: [{ 
  name: 'juan'
 },{
  name: 'luna'
 }];
}];

columnDefs = [{
      headerName: 'Room',
      field: 'room'
},{
      headerName: 'Name',
      field: 'name'
}]

HTML

 <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine-dark"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

我要做的是在网格中显示子数组。但是当我尝试运行/控制台时它返回未定义。

我也试过这个：

  valueGetter: function(params: any) {
    return console.log(params.data.data.name);
  }

返回未定义

【问题讨论】：

标签： javascript angular typescript ag-grid

【解决方案1】：

params.data.data[0].name 是正确的表达方式

因为 row 中的 data 属性实际上是名称数组。你也可以把支票像

if(params.data.data && params.data.data.length > 0){ return params.data.data[0].name; } else{ return '' ; }

【讨论】：

【解决方案2】：

在 colDef 中定义名称字段，例如 'data.name'
valueGetter: this.customValueGetter
我会使用customValueGetter like -

 customValueGetter(params) {

  const items;    
  const columnField = params.colDef.field;  
  const arrayNm = columnField.split(".")[0];  
  const fieldNm = columnField.split(".")[1];  

  if(params.data && params.data[arrayNm]) {  
   params.data[arrayNm].forEach((item) => items.push(item[fieldNm]));  
  }  
   return items.join(","); //comma separated names  
}

【讨论】：