如何在角度 ag 网格中启用排序答案

【问题标题】：how do enable sorting in an angular ag grid如何在角度 ag 网格中启用排序
【发布时间】：2021-01-15 01:58:03
【问题描述】：

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

这是模板：

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

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

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

【问题讨论】：

不要关注这个博客，因为它已经过时了。去官方documentation查看工作示例，如果有变化，他们会更新文档中的示例，而不是您阅读的博客。

标签： angular ag-grid ag-grid-angular

【解决方案1】：

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

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

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

然后在 html 中为您的 Ag-Grid 提供网格选项：

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

【讨论】：

这个解决方案有效，但我仍然想知道我的方法出了什么问题，因为我正在关注官方的 ag grid 博客指南。自该指南发布以来，他们是否改变了什么？
@sroool 如果您对答案感到满意，请接受并投票。至于出了什么问题，他们可能已经更改了语法，因为自那篇文章撰写以来，Ag-Grid 中已经发生了许多主要的语义版本更改。我提供的方法预计不会很快改变，所以我会继续前进。在一个地方定义网格的配置并在 html 中提供它也是有意义的，以使其更具可读性。
可以理解，那个指南已经 2 岁了。我赞成您的解决方案，但我的代表少于 15 个，因此它没有公开展示。谢谢你的帮助

【解决方案2】：

我在从 ag-grid 19 升级到 24 时遇到了这个问题。似乎从版本 20 开始，enableFilter 已在 GridOptions 级别删除，并且必须按照 ColDef 进行设置。 See here for more on that.

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

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

【讨论】：

【解决方案3】：

像这样尝试..

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>

【讨论】：

此解决方案不起作用，编译器仍然显示“无法绑定到 'enableSorting' 因为...”