ag-grid 不遵守 ColumnDefinitions 中设置的列的列顺序

Question

根据 ag-grid，列顺序将遵循它们在列定义中指定的顺序。参考

但这在使用 ag-grid-angular 时不起作用。一些列首先显示，即使它们是在列定义的末尾指定的。看一些示例代码，

// grid.ts
// helper function to generate a definition of a single column
function generateColDef() {
    return { ... };
}

// helper function to dynamically generate ColDefs
export function getColDef(someArgs) {
    const someDynamicCols = someArgs.map((arg) => {
        return generateColDef(.....);
    })
    const colDefs = [
        slColumn,   // A column to show serial number
        generateColDef('id', 'ID', {
            editable: false,
        }),
        generateColDef('name', 'Name', {
            editable: false,
        }),
        ...someDynamicCols,
    ];
    return colDefs;
}

// html
<ag-grid-angular [columnDefs]="colDefs" [rowData]="rowData | async">

// component
args = { some args fetched from server }
colDefs = grid.getColDef(args);
rowData = { some data fetched from server }

我希望首先显示“ID”和“名称”列，然后显示其余的列someDynamicCols。但是 ag-grid 有时会显示第someDynamicCols一个，然后是“ID”和“名称”列。

我尝试使用 ag-grid API 来设置 colDefs 而不是使用 2 路绑定，但结果保持不变。

有人可以解释一下可能是什么问题吗？是 ag-grid API 还是我做错了什么？

我正在使用角度为 10 的最新 ag-grid (24.0.0)

Answer 1

来自评论：您需要使用 >= 24.0.0 版本的 ag-grid

经过很长时间，我找到了这个问题的答案。我正在添加解决方案，以防它对其他人有帮助。

问题是，我正在用一些初始列初始化列定义。因此，当我添加一个新列时，ag-grid 将初始列保留在它们的位置并在它们之后添加新列。这是默认的 ag-grid 行为。

要覆盖此行为并使 ag-grid 始终遵循列顺序，请在 Grid Options中将applyColumnDefOrder属性设置为true。

这是在 ag-grid 文档中提到的：https : //www.ag-grid.com/javascript-grid-column-updating-definitions/#applying-column-order