Ag-Grid AutoGroupColumnDef 在 setColumnDef() 函数调用后如何工作？答案

【问题标题】：Ag-Grid AutoGroupColumnDef how to work after setColumnDef() function call?Ag-Grid AutoGroupColumnDef 在 setColumnDef() 函数调用后如何工作？
【发布时间】：2020-09-08 06:27:33
【问题描述】：

我在我的 Angular 9 项目中使用 Ag-Grid。我想在这个 Ag-Grid 表上使用树结构。我的专栏是动态的。所以我正在使用 push to columnDefs。毕竟，我正在做 setColumnDefs 函数。但在那之后， AutoGroupColumnDef 属性不起作用。当我尝试在没有 setColumnDef 的情况下使用静态 columnDefs 时，一切正常。

那么如何在 setColumnDefs 函数之后使用 autoGroupColumnDef 呢？有什么办法吗？谢谢。

不带 setColumnDef 功能的工作 autoGroupColumnDef：

this.autoGroupColumnDef = {
                headerName: 'Organisation Hierarchy',
                minWidth: 300,
                cellRendererParams: {
                  suppressCount: true,
                },
              };

我的动态列示例：

for (var i = 0; i < result2.data.data.length; i++) {
                this.columnDefs.push({
                  headerName: result2.data.data[i].description,
                  field: result2.data.data[i].description,
                  valueFormatter: this.checkboxValueFormatter,
                  width: 150,
                  editable: false,
                  filter: 'agSetColumnFilter',
                  filterParams: {
                    valueFormatter: this.checkboxValueFormatter
                  },
                  cellRenderer: function(params: any) {
                    var input = document.createElement('input');
                    input.type = 'checkbox';
                    input.name = 'roles[]';
                    // input.disabled=true;
                    // 1 true 0 false
                    if (params.value) {
                      input.checked = params.value;
                    } else {
                      input.disabled = true;
                    }
                    return input;
                  }
                });
              }
              this.gridApi.setColumnDefs(this.columnDefs);

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

我有动态更改 ColumnDef 的工作代码，但我不认为我也尝试过更改 autoGroupColumnDef。

但是，在使用 Angular 时，无论您是将 columnDefs 绑定到网格的输入，还是使用 setColumnDefs api，我都发现了一些事情：

与绑定属性一样，您可能希望为 columnDefs 使用新数组，而不仅仅是将新列推入现有数组。
当您再次设置 columnDefs 时，网格往往会出现错误行为，尤其是当您的新 columnDefs 中的列名称与旧 columnDefs 中的名称相同时。因此，首先将 columnDefs 设置为一个空数组，这样可以正确清除它们，然后设置新的 columnDefs。我通过反复试验发现了这一点。

所以，我会尝试更新 autoGroupColumnDef，然后（可能在 setTimeout() 之后）将 columnDefs 设置为空数组，然后（根据我的经验无需等待 setTimeout）将 columnDefs 设置为包含新列的新数组。

【讨论】：