时间戳

首页 > 解决方案 > 对 ag-grid 中的对象使用自定义过滤器

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

问题描述

我有一个 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并且一旦将某些内容写入过滤器字段，所有条目都会被过滤。如前所述，这是一个简化版本，但问题是一样的。

标签： angularag-gridag-grid-angular

解决方案

您的代码中一切都很好，但只缺少一些小细节，如下所示：

在您的构造中，sortable使用DefaultColDef如下对象设置网格：

this.defaultColDef = {
  sortable: true,
};

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

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

这里是基于您的代码的解决方案 Plnkr 链接：

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

推荐阅读