如何在agGrid中获取动态生成的复选框列的新旧值答案

【问题标题】：How to get old and new value of dynamically generated checkbox column in agGrid如何在agGrid中获取动态生成的复选框列的新旧值
【发布时间】：2020-09-16 22:22:55
【问题描述】：

我正在使用动态创建列的 agGrid。我的目标是在选中复选框后获取旧值和新值。我尝试使用“onCellValueChanged”，但它没有用。如果我使用“onCellClicked”，那么我不会得到旧值和新值。

为了您的理解，我想用旧值和新值表示，如果用户检查，则旧值为假，新值为真。

HTML

<ag-grid-angular class="ag-theme-balham" [gridOptions]="siteJobDeptGridOptions"
            [rowData]="siteJobDeptRowData" [columnDefs]="siteJobDeptColDef" [paginationPageSize]=10 [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
        </ag-grid-angular>

TS 文件

export class SiteJobDeptConfigComponent implements OnInit {
ngOnInit() {
    this.domLayout = "autoHeight";                      
    this.getAllSiteJobConfig();      
    this.generateColumns();     
}

onGridReady(params: any) {            
    params.api.sizeColumnsToFit();
    params.api.resetRowHeights();                                        
}

generateColumns()
{
    let deptColDef = []; 

    let colSiteJob =  { 
            field: 'SiteJobName', headerName: 'Site Job Name',resizable: true,
            sortable: true, filter: true, editable: false, 
    }

    this.siteJobDeptCommonService.getEntityData('getpublisheddepts')
        .subscribe((rowData) => {  
            deptColDef.push(colSiteJob);                              
            for(let dept of rowData)
            {                                    
                deptColDef.push({ 
                    field: dept.DeptName, headerName: dept.DeptName, width:100,resizable: true,
                    cellClass: 'no-border',                                        
                    cellRenderer : params => {                        
                        var input = document.createElement('input');
                        input.type="checkbox";                        
                        input.checked=params.data[dept.DeptName];                       
                        return input;
                    },                    
                    onCellValueChanged: this.siteDeptCellValueChanged.bind(this),

                })
            }                            
        this.siteJobDeptColDef = deptColDef;              
    },
    (error) => { alert(error) });         
}

siteDeptCellValueChanged(dataCol: any) {    
    let checkedOldValue = "Old Check Value - " + dataCol.oldValue;   
    let checkedNewValue = "New Check Value - " + dataCol.newValue;                        
}

getAllSiteJobConfig()
{        
    let siteJobRowData = [];
    this.siteJobDeptCommonService.getEntityData('getallsitedeptjob')
        .subscribe((rowData) => {            
            for(let siteJobDetail of rowData)
            {               
                for(let deptAllow of siteJobDetail.DeptAllow)
                {
                    tempArray[deptAllow["DeptName"]] = deptAllow["IsAllow"];
                }

                siteJobRowData.push(tempArray); 
            }
            this.siteJobDeptRowData = siteJobRowData;
        },
        (error) => { alert(error) }); 
    }    
}

网格如下所示：-

您能帮我如何从动态生成的复选框中获取旧数据和新数据值吗？

【问题讨论】：

标签： checkbox angular8 ag-grid-angular

【解决方案1】：

在列定义创建中应该是“cellValueChanged”而不是“onCellValueChanged”。你可以找到here。

【讨论】：

【解决方案2】：

当您在 params 对象中声明您的方法时，oldValue 和 newValue 属性会给出您正在寻找的结果：

onCellValueChanged: function(params)  {
            console.log(params.oldValue);
            console.log(params.newValue) 
}

【讨论】：