Angular 8中Ag-Grid横向滚动时refreshCells无法刷新全部单元格

我是Ag-Grid新手，在项目中使用了带横向滚动的多列表格。通过cellClass实现空单元格验证，为空时显示红色边框。点击保存按钮时调用this.gridApi.refreshCells({force: true})尝试刷新单元格，但问题是该方法仅刷新当前视图可见的单元格，而非表格所有列。

代码实现： #

columnDefs 定义：

{
  headerName: 'A', field: 'A',
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: this.getChannelTypeArray.bind(this),
  cellClass: this.emptyCellClass.bind(this)
},
{
  headerName: 'B', field: 'B',
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: this.getChannelSubTypeArray.bind(this),
  cellClass: this.emptyCellClass.bind(this)
},.. // 共约20列

cellClass 方法：

emptyCellClass(params: CellClassParams) {
    if (!params.value || params.value == FieldConstants.SELECT_OPTION) {
      this.validationPassed = false;
      return FieldConstants.OUTER_RED_CLASS;
    }
}

保存方法：

OnSave() {
    this.validationPassed = true;
    this.gridApi.refreshCells({
      force: true
    });
   // 我尝试过的其他方法:
   // gridOptions.api.redrawRows();
   if(this.validationPassed){
     //执行数据库调用
   } else {
     //显示错误提示
   }
}

理想情况下，refreshCells()应触发所有列的cellClass计算，从而重新设置validationPassed变量，但实际仅刷新当前视图可见的列。请问该如何解决？

1. 主动遍历所有数据做验证（推荐） #

不要依赖cellClass的渲染逻辑更新validationPassed——Ag-Grid为了性能只会渲染可见单元格。直接在保存时主动遍历所有行和列完成验证：

OnSave() {
    this.validationPassed = true;
    // 获取所有行数据
    const allRows = this.gridApi.getAllRows();
    // 获取所有列的field字段
    const allFields = this.columnDefs.map(col => col.field);
    
    allRows.forEach(row => {
      allFields.forEach(field => {
        const value = row.data[field];
        if (!value || value === FieldConstants.SELECT_OPTION) {
          this.validationPassed = false;
        }
      });
    });

    if(this.validationPassed){
      //执行数据库调用
    } else {
      //显示错误提示
      // 刷新可见单元格以显示红色边框
      this.gridApi.refreshCells({force: true});
    }
}

2. 强制刷新所有单元格（性能敏感场景慎用） #

通过refreshCells的columns和rowNodes参数，指定刷新所有行和列，但注意Ag-Grid渲染是异步的，需要延迟判断结果：

OnSave() {
    this.validationPassed = true;
    const allRowNodes = this.gridApi.getAllNodes();
    const allColumns = this.gridApi.getAllColumns();
    
    this.gridApi.refreshCells({
      force: true,
      rowNodes: allRowNodes,
      columns: allColumns
    });

    // 等待渲染完成后判断结果
    setTimeout(() => {
      if(this.validationPassed){
        //执行数据库调用
      } else {
        //显示错误提示
      }
    }, 0);
}

3. 分离验证与样式逻辑 #

把验证逻辑和样式渲染逻辑拆分，cellClass仅负责返回样式，验证逻辑单独实现：

// 独立的全量验证方法
validateAllCells(): boolean {
    const allRows = this.gridApi.getAllRows();
    const allFields = this.columnDefs.map(col => col.field);
    let isValid = true;
    allRows.forEach(row => {
      allFields.forEach(field => {
        const value = row.data[field];
        if (!value || value === FieldConstants.SELECT_OPTION) {
          isValid = false;
        }
      });
    });
    return isValid;
}

// 修改cellClass，仅处理样式
emptyCellClass(params: CellClassParams) {
    if (!params.value || params.value == FieldConstants.SELECT_OPTION) {
      return FieldConstants.OUTER_RED_CLASS;
    }
}

// 保存方法
OnSave() {
    const isValid = this.validateAllCells();
    if(isValid){
      //执行数据库调用
    } else {
      //显示错误提示
      this.gridApi.refreshCells({force: true});
    }
}

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