ag-grid - Ag-Grid + Angular + 过滤复杂数据

Question

我有一个在角度应用程序中使用 ag-grid 的表。我有一列需要为其添加过滤器。该列是一个数组，每条记录可以有多个记录。请找到附件。当我过滤 REPORT 1 时，由于 REPORT 2 也是该行的一部分，因此它正在显示。你能告诉我如何过滤以仅获得 REPORT 1 吗？

 {
        headerName: 'Available Reports',
        field: 'reportTypes',
        cellRendererFramework: LinkComponentComponent,                        
        width: 1020,        
        filter: "agSetColumnFilter",               
        keyCreator: this.reportKeyCreator  ,  
        filterParams: {          
          cellHeight: 20,
          debounceMs: 1000,             
          selectAllOnMiniFilter: true 
        }                                        
      } 

reportKeyCreator(params) {           
    return params.value[0].reportType;
  } 

这是数据结构

[
  {
    "Name": "ABCD-126",
    "reportDate": "10-02-2018",
    "reportTypes": [
      {
        "reportType": "REPORT1",
        "reportPath": "report1",
        "reportNum": "114"
      }
    ]
  },
  {
    "Name": "ABCD-126",
    "reportDate": "10-01-2018",
    "reportTypes": [
      {
        "reportType": "REPORT1",
        "reportPath": "report1",
        "reportNum": "115"
      },
      {
        "reportType": "REPORT2",
        "reportPath": "report2",
        "reportNum": "116"
      }
    ]
  }
]

标签： ag-grid

Answer 1

您可以创建自己的customFitler并在内部处理需要的东西，但我想您需要按单元格拆分复杂对象并获得分组概念，您可以使用HeaderGroupping。

这将是一个更正确的方法。

{
    headerName: "Reports",
    children: [
        {headerName: "Type", field: "reportType"},
        {headerName: "Path", field: "reportPath"},
        {headerName: "Num", field: "reportNum"}
    ]
}