对 ag-grid 中的对象使用自定义过滤器

Question

我有一个 ag-grid 表，我将一些对象作为数据传递。我想添加一些自定义过滤器。下面是我的问题的一个非常简化的版本。

我有一个接口VersionInfo，它代表我传递给网格的对象。

export interface VersionInfo {
    version: number;
   // more fields here...
}

然后我指定网格的架构并添加一些数据：

columnDefs = [
    {
      headerName: 'Version', 
      field: 'version', 
      filter: 'agNumberColumnFilter',
      comparator: (a, b) => b.version - a.version,
      cellRenderer: (params: ICellRendererParams) => {
        return `Custom rendering ${params.data.version.version}`;
      }
    }
];

rowData = [
    { version: {version: 3} },
    { version: {version: 5} },
    { version: {version: 8} }
];

HTML 如下所示：

<ag-grid-angular 
    style="width: 500px; height: 200px;" 
    class="ag-theme-alpine"
    [rowData]="rowData" 
    [columnDefs]="columnDefs">
</ag-grid-angular>

除了comparator，一切都运行良好。我会假设它会以相反的顺序对表格进行排序，但没有发生任何事情，我只是得到rowData 中指定的表格，并且一旦将某些内容写入过滤器字段，所有条目都会被过滤。如前所述，这是一个简化版本，但问题是一样的。

Answer 1

您的代码一切正常，但缺少只有小细节，如下：

在您的构造中，将网格 sortable 设置为 DefaultColDef 对象，如下所示：

this.defaultColDef = {
  sortable: true,
};

编辑： 在列定义中添加此部分：

...
headerName: 'version',
valueGetter: (params: any) => {
  return 'Custom rendering ' + params.data.version.version;
},
...

这里是 solution Plnkr link 基于您的代码：

希望它能解决您的问题。如果没有，请告诉我。