ag-grid setColumnVisible 不起作用答案

【问题标题】：ag-grid setColumnVisible not workingag-grid setColumnVisible 不起作用
【发布时间】：2020-05-22 19:31:07
【问题描述】：

我还需要做些什么来确保 gridOptions.columnApi.setColumnVisible 做到它在锡上所说的那样吗？ :-

此代码在运行时在渲染网格上运行，应该立即隐藏列，但什么也不做：-

gridOptions.columnApi.setColumnVisible("the col name", false);

【问题讨论】：

标签： ag-grid

【解决方案1】：

两种可能的原因：

当您尝试隐藏列时，网格尚未准备好。这可能不是您所说的网格已呈现的情况，但值得检查
您没有使用正确的列标识符。这可以是列 ID 或 Column 对象。

可能是后者 - 您是否使用标题名称而不是字段/col id？

例如，如果你有这个：

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 200}
];

那么第一个参数将是'athlete'，而不是'Athlete'。

您可以另外指定一个 colId 以排除任何冲突，然后在您的 api 调用中使用此 id：

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 200, colId: "athleteCol"}
];

但这通常不是必需的。

【讨论】：

【解决方案2】：

如果这对其他人有帮助 - 我遇到了类似的问题，但使用的是实际的列方法本身。所以至少对于我的应用来说，列的 setVisible 方法不能正常工作，但是 columnApi 方法的 setColumnVisible 方法确实有效：

// does NOT work correctly
this.columnApi.getColumn('name').setVisible(true); 

// does work correctly
this.columnApi.setColumnVisible('name', true);

【讨论】：

【解决方案3】：

参考 Aurelia ag-grid 示例代码：我在运行时将 Columns 隐藏在 *.ts 组件的构造函数中，如下所示：

this.gridOptions.onGridReady = () => {
  ...snip
  this.columnApi = that.gridOptions.columnApi;
  this.gridOptions.columnApi.setColumnVisible('REQCONTEXT', false);
}//onGridReady

其中 'REQCONTEXT' 是要隐藏的列的名称。

【讨论】：

【解决方案4】：

确保你得到了

 (gridReady)="onGridReady($event)"

在模板中。

我一直都这样做！

干杯！

【讨论】：

【解决方案5】：

我遇到了确切的问题，通过添加解决了

    setTimeout(() => {
      this.grid.api.refreshView();
      this.grid.api.sizeColumnsToFit();
    }, 0)

拨打setColumnVisible之后

【讨论】：

gridApi.refreshView() 已弃用，请参阅ag-grid.com/javascript-data-grid/view-refresh