如何在 angular ag 网格中启用排序

Question

我正在尝试将排序添加到简单的 ag 网格，但我一直收到一条错误消息：无法绑定到 'enableSorting'，因为它不是 'ag-grid-angular' 的已知属性。

这是模板：

<ag-grid-angular
 [enableSorting]="true"
 [rowData]="rowData"
 [columnDefs]="columnDefs"
>
</ag-grid-angular>

我什至尝试使用 GridOptions 对象，但它无法识别 enableSorting 或 enableFilter，但它可以识别分页。我做错了什么？

我正在关注 ag grid 博客上的 this 介绍指南。没有排序部分，网格按预期工作，所以我认为它与配置（导入模块和导入数组）无关，但我还是仔细检查了它的所有设置正确！ angular 版本 10 ag 网格版本 24.

Answer 1

我个人建议再次使用 GridOptions - 因为您可能想要指定 Ag-Grid 的外观和感觉的其他部分数量。

如果您希望对网格中的所有列进行排序，只需使用以下命令：

gridOptions: GridOptions = {
  defaultColDef: {
    sortable: true
  }
}

然后在 html:

中为您的 Ag-Grid 提供网格选项

<ag-grid-angular
 [gridOptions]="gridOptions"
 [rowData]="rowData"
 [columnDefs]="columnDefs"
>
</ag-grid-angular>

Answer 2

try like this..

gridOptions: {
 
    defaultColDef: {
        sortable: true
    },
    columnDefs: [
        { field: 'name' },
        { field: 'age' },
     
        { field: 'address', sortable: false },
    ]
}



    <ag-grid-angular
            [rowData]="rowData | async"
            [columnDefs]="columnDefs"
            [enableSorting]="true"
        >
        </ag-grid-angular>

Answer 3

我运行在从 ag-grid 19 升级到 24 时遇到了这个问题。看来自从版本 20 enableFilter 已在 GridOptions 级别删除并且必须设置每 ColDef。 See here for more on that.

虽然我找不到任何类似的文档，但我怀疑 enableSorting 也发生了同样的事情。正如@cmprogram在his/her答案中提到的那样，它似乎因此被替换为ColDef级别的可排序。

这是猜测，但如果有人能找到有关该更改的文档，请在评论中回复，我会将其添加到此答案中。

如何在 angular ag 网格中启用排序

how do enable sorting in an angular ag grid

ag-grid

angular

ag-grid-angular