Angular 13中如何条件隐藏ag-grid的automaticStart列？

你的代码存在两个核心问题导致列无法被隐藏：

1. 仅获取了列的hide属性，但未将其设置为true
2. 调用setColumnDefs时传入的是原列定义数组，没有修改目标列的属性值

以下是两种可行的修复方案：

方案一：直接通过gridApi控制列可见性 #

无需重新设置整个列定义数组，使用setColumnVisible方法更高效：

loadBatchFiles() {
  this.batchProcessing
    .getBatchProcessingFiles()
    .subscribe((data: DataProcessingView) => {
      this.batchFiles = data.storedFileViewDtoList;
      // 根据signOffEnabled值切换列的显示/隐藏
      this.gridApi.setColumnVisible('automaticStart', !data.signOffEnabled);
    });
}

注：setColumnVisible第二个参数为visible，因此当data.signOffEnabled为true时，传入false实现列隐藏

方案二：修改列定义数组后重新赋值 #

若需保留修改列定义的方式，需确保修改目标列的hide属性：

loadBatchFiles() {
  this.batchProcessing
    .getBatchProcessingFiles()
    .subscribe((data: DataProcessingView) => {
      this.batchFiles = data.storedFileViewDtoList;
      // 找到目标列定义
      const targetCol = this.columnDefs.find(col => col.field === 'automaticStart');
      if (targetCol) {
        // 根据条件设置hide属性
        targetCol.hide = data.signOffEnabled;
        // 生成新数组触发网格更新
        this.gridApi.setColumnDefs([...this.columnDefs]);
      }
    });
}

注：使用扩展运算符[...this.columnDefs]创建新数组，确保ag-grid能检测到列定义的变化

关键前置检查 #

确保gridApi已正确初始化：ag-grid的gridApi需通过gridReady事件获取，需在模板中绑定该事件：

<ag-grid-angular
  (gridReady)="onGridReady($event)"
  [columnDefs]="columnDefs"
  [rowData]="batchFiles"
  <!-- 其他配置项 -->
></ag-grid-angular>

组件中实现事件处理：

onGridReady(params: GridReadyEvent<DataProcessing>) {
  this.gridApi = params.api;
}

若未正确获取gridApi，后续所有API调用都会失效。

内容的提问来源于stack exchange，提问作者Angad Patil