Angular-Ag-Grid数据加载后及事件触发时如何禁用指定行单元格的Checkbox、Radio

解决方案 #

你遇到的核心问题是静态配置的cellRendererParams仅在单元格初始化时计算一次，后续行数据更新不会触发重新计算，且自定义渲染器只在agOnInit中读取一次参数，没有响应数据变化。按以下步骤修改即可：

步骤1：调整自定义渲染器逻辑，绑定动态值

不要仅在agOnInit生命周期中读取禁用参数并存储为本地静态变量，改为直接绑定渲染器上下文的动态参数，同时实现refresh方法响应数据更新（以Angular版本ag-grid为例）：

// GridCheckboxRendererComponent 示例代码
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-grid-checkbox-renderer',
  template: `<input type="checkbox" [disabled]="!params.data.state" [(ngModel)]="params.value" />`
})
export class GridCheckboxRendererComponent implements ICellRendererAngularComp {
  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  // 行数据更新时触发，刷新组件参数
  refresh(params: any): boolean {
    this.params = params;
    return true;
  }
}

Radio按钮渲染器GridRadioButtonRendererComponent同理，直接在模板的disabled属性绑定!params.data.state即可，无需依赖父组件传入的禁用参数。

步骤2：（可选）保留父级控制逻辑的修改方案

如果你需要将禁用逻辑放在父组件统一管理，可将cellRendererParams改为回调形式，每次单元格渲染时动态计算禁用状态：

// 列定义修改示例
{
  headerName: 'check Case',
  field: 'checkCase',
  cellRendererFramework: GridCheckboxRendererComponent,
  onCellValueChanged: (event: CellValueChangedEvent) => {
    this.updateCaseCheck(event);
  },
  // 改为回调，每次渲染都会执行，拿到当前行最新数据
  cellRendererParams: (params) => ({
    disableCaseCheckbox: !params.data.state
  })
},
{
  headerName: 'Make Default',
  field: 'makeDefault',
  cellRendererFramework: GridRadioButtonRendererComponent,
  onCellValueChanged: (event: CellValueChangedEvent) => {
    this.setDefault(event);
  },
  cellRendererParams: (params) => ({
    disableDefaultRadio: !params.data.state
  })
}

步骤3：新增行后强制刷新对应单元格（可选）

如果修改后新增行仍未生效，可在插入行后主动调用ag-grid的刷新API刷新目标行的对应列：

this.gridApi.setRowData(this.caseRowData);
// 用你拿到的rowNodeId获取目标行节点
const targetRow = this.gridApi.getRowNode(新增行的rowNodeId);
// 强制刷新目标行的复选框、单选框列
this.gridApi.refreshCells({
  rowNodes: [targetRow],
  columns: ['checkCase', 'makeDefault'],
  force: true
});

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