Ag-Grid cellRender with Button Click [英] Ag-Grid cellRender with Button Click

问题描述

我正在使用带有 ag-grid 数据表的 angular 5我无法在这里使用 cellRenderer 从单元格触发点击事件，我如何使用我的 ag-grid --> colDefs

I am using an angular 5 with ag-grid data table i cant able to trigger a click event from cell using cellRenderer here how am using my ag-grid --> colDefs

this.columnDefs = [
            {headerName: '#', rowDrag: true, width: 75},
            {headerName: 'One', field: 'fieldName',
                cellRenderer : function(params){
                    return '<div><button (click)="drop()">Click</button></div>'
                }
            }
];

drop() {
    alert("BUTTON CLICKEFD")
}

如果我正在使用 onClick="alert("123")" --> 它可以工作，但我不能使用 onClick="drop()" 它会抛出一滴未定义，

if am using onClick="alert("123")" --> it works, but i cant able to use onClick="drop()" it throws drop of undefined,

我在 cellRenderer 内部也试过这个 --> params = params.$scope.drop = this.drop;

i tried this too inside of cellRenderer --> params = params.$scope.drop = this.drop;

如果我使用带有 angularCompileRows : true 的 gridOptions，它会抛出一个错误 Cannot read property '$apply' of undefined.我需要安装ag-grid企业 ??

if am using gridOptions with angularCompileRows : true it throws an error Cannot read property '$apply' of undefined. Do i need to install ag-grid enterprise ??

推荐答案

您可以将 cellRenderer 与按钮组件一起使用.如果你想从表上的用户那里获取按钮上的点击事件，只需声明你想要的回调函数cellRendererParams.

You can use cellRenderer with a button component. If you want to get the click event on the button from the user on the table, just declare the callback function you want to cellRendererParams.

// app.component.ts
columnDefs = [
{
  headerName: 'Button Col 1',
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: 'Click'
  }
},
...
]

以上代码只是一小部分，请查看 Stackblitz

The above code is just a small part, check out full example on Stackblitz

这篇关于Ag-Grid cellRender with Button Click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！