如何在angular ag网格中显示子数组

Question

here's the code:

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>

What I'm trying to do is to display the child array in the grid. but when I try to run/console it return undefined.

also I tried this:

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

it return undefined

Answer 1

params.data.data[0].name is the correct expression

Because the data attribute in row is actually array of names. You can also put a check like

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

Answer 2

1. Define name field in colDef like 'data.name'
valueGetter: this.customValueGetter

2. I would use 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  
}