AG Grid中cellRenderer渲染复选框（无法用ng-model）如何获取值？

嗨，这个问题我之前也碰到过！因为你用原生HTML字符串渲染复选框，没法直接用Angular的ng-model做双向绑定，所以得换个思路来同步和获取状态，下面给你两种可行的方案：

方案一：同步复选框状态到AG Grid行数据（快速适配你的现有代码） #

这种方案不用大改你当前的cellRenderer，只需要给复选框加个点击事件，把状态同步回行数据，后续直接从数据源取就行：

1. 修改cellRenderer的HTML字符串
   给每个复选框加上唯一标识（比如行索引）和点击事件，用来同步状态：

return `<input type='checkbox' 
               ${params.value.disable ? 'disabled' : ''} 
               ${params.value.state ? 'checked' : ''}
               onclick="window.updateCheckboxState(${params.rowIndex}, this.checked)" />`;

2. 在Angular组件中定义状态同步方法
   先在gridReady事件里保存AG Grid的API实例，方便后续操作行数据：

private gridApi: any;

onGridReady(params: any) {
  this.gridApi = params.api;
}

然后定义全局可访问的同步方法（在当前环境下这种方式最简单）：

ngOnInit() {
  window.updateCheckboxState = (rowIndex: number, isChecked: boolean) => {
    const rowNode = this.gridApi.getDisplayedRowAtIndex(rowIndex);
    if (rowNode) {
      // 替换成你实际的字段名，比如你的列字段是'checkbox'，就写'checkbox.state'
      rowNode.setDataValue('checkbox.state', isChecked);
    }
  };
}

3. 点击GET按钮获取所有状态
   不用再去遍历DOM，直接从AG Grid的行数据里提取：

getCheckboxValues() {
  const allRows = this.gridApi.getAllRows();
  const checkboxStatusList = allRows.map(row => ({
    行标识: row.id, // 替换成你行数据里的唯一标识字段
    是否勾选: row.checkbox.state,
    是否禁用: row.checkbox.disable
  }));
  console.log('所有复选框状态:', checkboxStatusList);
  // 这里就可以对这些数据做后续处理了
}

方案二：自定义Angular Cell Renderer组件（更符合Angular最佳实践） #

如果想彻底融入Angular的生态，建议用自定义组件来做cellRenderer，这样能避免全局方法，更好地利用Angular的绑定特性：

1. 创建复选框渲染组件

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  template: `
    <input type="checkbox" 
           [disabled]="params.value.disable" 
           [checked]="params.value.state"
           (change)="onCheckboxChange($event.target.checked)" />
  `
})
export class CheckboxCellRenderer implements ICellRendererAngularComp {
  params: any;

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

  refresh(params: any): boolean {
    this.params = params;
    return true;
  }

  onCheckboxChange(isChecked: boolean) {
    // 直接把状态同步回行数据
    this.params.node.setDataValue('checkbox.state', isChecked);
  }
}

2. 在AG Grid中注册并使用该组件
   在你的表格组件里，注册这个自定义组件：

import { CheckboxCellRenderer } from './checkbox-cell-renderer.component';

// ...

columnDefs = [
  // 其他列定义...
  {
    headerName: '复选框列',
    field: 'checkbox',
    cellRenderer: 'checkboxCellRenderer'
  }
];

frameworkComponents = {
  checkboxCellRenderer: CheckboxCellRenderer
};

3. 获取状态的方式和方案一一致
   点击GET按钮时，直接从行数据中提取即可，代码和方案一的getCheckboxValues完全一样。

两种方案里，方案二更推荐，因为它更符合Angular的组件化思想，也更容易维护。

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