如何处理网格网格中的对象的嵌套数组(角)

时间:2019-02-04 11:30:38

标签: javascript angular ag-grid

我在angular6中使用ag-grid,我在同一行中获取对象的嵌套数组,我需要显示某个特定字段的多条记录

{
  "Id": "123",
  "Name": "usb",
  "email": "123@gmail.com",
  "Config": [
    {
      "config": "config1",
      "field2": "1",
      "field3": "1",
      "field4": "1",
      
    },
    {
      "config": "config2",
      "field2": "3",
      "field3": "3",
      "field4": "3",
      
    }
  ]
},
{
  "Id": "123",
  "Name": "usb",
  "email": "123@gmail.com",
  "Config": [
    {
      "config": "config1",
      "field2": "1",
      "field3": "1",
      "field4": "1",
      
    },
    {
      "config": "2",
      "field2": "3",
      "field3": "3",
      "field4": "3",
      
    },
    {
      "field1": "2",
      "field2": "3",
      "field3": "3",
      "field4": "3",
      
    }
  ]
}

在上面的对象中,当我到达config字段时,需要像下面这样显示,因为配置数是动态的 enter image description here

1 个答案:

答案 0 :(得分:1)

您可能需要使用ag-grid提供的CellRenderers

因此,在您的columnDefs中,对于诸如config和field之类的字段,您需要使用如下所示的cellRendererFramework。

  {
    headerName: 'config',
    field: 'config',
    cellRendererFramework: YourRenderer
  }

,然后在您的YourRenderer中,如下所示:

@Component({
  selector: 'your-renderer',
  template: `
   <div> the way you wanted to display the config </div>
  `
})
export class YourRenderer implements ICellRendererAngularComp {
  public params: ICellRendererParams;

  public agInit(params: ICellRendererParams): void {
    this.params = params.value;
  }

  public refresh(params: ICellRendererParams): boolean {
    return false;
  }
}