Angular AG Grid自定义渲染器：select变更触发cellValueChanged事件

直接用AG Grid提供的setValue方法手动通知网格值变更，这是最简洁高效的方式，具体步骤如下：

实现步骤 #

1. 在自定义渲染器组件中保存AG Grid传入的ICellRendererParams参数，里面包含网格API、当前行节点和列信息。
2. 监听select的change事件，获取新值后调用params.api.setValue()，该方法会自动更新行数据并触发cellValueChanged事件，无需额外调用refreshCells或编辑状态切换方法。

代码示例 #

自定义渲染器组件HTML #

<select (change)="handleSelectChange($event)">
  <option 
    *ngFor="let item of selectOptions" 
    [value]="item.value"
    [selected]="item.value === params.value"
  >
    {{ item.label }}
  </option>
</select>

自定义渲染器组件TS #

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

@Component({
  selector: 'app-select-renderer',
  templateUrl: './select-renderer.component.html'
})
export class SelectRendererComponent {
  selectOptions = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' }
    // 你的自定义选项
  ];
  params!: ICellRendererParams;

  // AG Grid初始化时传入参数
  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  handleSelectChange(event: Event): void {
    const target = event.target as HTMLSelectElement;
    const newValue = target.value;
    
    // 核心：通知AG Grid值变更，自动触发cellValueChanged
    this.params.api.setValue(this.params.column, newValue, this.params.node);
  }
}

为什么之前的方法无效？ #

• refreshCells仅用于重绘单元格，不会触发值变更相关事件，它只是刷新视图而非通知数据变更。
• stopEditing/startEditing是针对AG Grid内置编辑模式的方法，自定义渲染器组件不属于网格的编辑状态上下文，所以调用这些方法不会触发编辑相关事件。

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