Angular中无法捕获AG-Grid内下拉框选中值的问题

AG-Grid的cellRenderer组件仅负责UI渲染，不会自动把组件内的选中值同步到行数据模型里，这就是你直接获取行数据时supplierid显示undefined的原因。下面是两种可行的解决办法：

方法1：组件通信手动同步值到行数据 #

1. 子下拉框组件添加事件输出：当选中值变化时，调用父组件传递的回调更新行数据

   // supplier-select.component.ts
   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-supplier-select',
     templateUrl: './supplier-select.component.html'
   })
   export class SupplierSelectComponent {
     @Input() params: any;
     selectedSupplierId: string;
   
     ngOnInit() {
       // 初始化时绑定行数据里的初始值
       this.selectedSupplierId = this.params.data.supplierid;
     }
   
     onSupplierChange(event: any) {
       const newId = event.target.value;
       // 调用父组件传入的回调更新行数据
       this.params.onSupplierChange(this.params, newId);
     }
   }
   

   子组件HTML：

   <!-- supplier-select.component.html -->
   <select [value]="selectedSupplierId" (change)="onSupplierChange($event)">
     <option value="">请选择供应商</option>
     <option *ngFor="let item of params.suppliers" [value]="item.id">{{item.name}}</option>
   </select>
   

2. 父组件列配置传递回调函数：在cellRendererParams里定义回调，接收子组件的新值并更新行数据

   // 父组件TS
   import { SupplierSelectComponent } from './supplier-select.component';
   
   export class ParentComponent {
     gridApi: any;
     supplierList = [/* 你的供应商数据 */];
     columnDefs = [
       // 其他列配置...
       {
         headerName: '供应商',
         field: 'supplierid',
         cellRenderer: 'supplierSelectRenderer',
         cellRendererParams: {
           suppliers: this.supplierList,
           onSupplierChange: (params: any, newId: string) => {
             // 调用AG-Grid API更新当前行的supplierid字段
             params.api.setValue(params.node, 'supplierid', newId);
           }
         }
       }
     ];
   
     frameworkComponents = {
       supplierSelectRenderer: SupplierSelectComponent
     };
   
     onGridReady(params: any) {
       this.gridApi = params.api;
     }
   
     onSubmit() {
       const rows = this.gridApi.getRowNodes().map(node => node.data);
       console.log(rows); // 此时supplierid已同步选中值
     }
   }
   

方法2：改用cellEditor组件（推荐编辑场景） #

如果这个下拉框是用来编辑数据的，直接用AG-Grid的cellEditor更合适，它会自动同步编辑后的值到行数据：

1. 子组件实现AG-Grid编辑器接口

   // supplier-select.component.ts
   import { Component } from '@angular/core';
   import { ICellEditorAngularComp } from 'ag-grid-angular';
   
   @Component({
     selector: 'app-supplier-select',
     templateUrl: './supplier-select.component.html'
   })
   export class SupplierSelectComponent implements ICellEditorAngularComp {
     params: any;
     selectedId: string;
   
     agInit(params: any): void {
       this.params = params;
       this.selectedId = params.value;
     }
   
     // AG-Grid会调用这个方法获取编辑后的值，自动同步到行数据
     getValue(): any {
       return this.selectedId;
     }
   
     onSupplierChange(event: any) {
       this.selectedId = event.target.value;
     }
   }
   

2. 父组件列配置使用cellEditor

   // 父组件TS
   columnDefs = [
     // 其他列...
     {
       headerName: '供应商',
       field: 'supplierid',
       editable: true, // 开启编辑
       cellEditor: 'supplierSelectEditor',
       cellEditorParams: {
         suppliers: this.supplierList
       },
       // 自定义单元格显示内容（显示供应商名称而非ID）
       cellRenderer: (params: any) => {
         const supplier = this.supplierList.find(s => s.id === params.value);
         return supplier ? supplier.name : '';
       }
     }
   ];
   
   frameworkComponents = {
     supplierSelectEditor: SupplierSelectComponent
   };
   

验证 #

提交时通过AG-Grid的API获取行数据，比如this.gridApi.getRowNodes().map(n => n.data)，就能看到supplierid字段已经正确获取到选中值了。

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