ag-grid cellRenderer元素的动作不起作用

Posted 2021-04-17

我试图让我的删除按钮在我的Ag-Grid表中工作。但是当我点击我的删除按钮时，事件不会触发。

这是我的代码：

columnDefs = [
  {headerName: 'Language Name', field: 'language_name' },
  {headerName: 'Options', field: 'options', cellRenderer: this.optionsRendererFunc, autoHeight: true, width: 100}
];

deleteBtnClicked(id) {
  console.log(id);
}

optionsRendererFunc(params) {
   return '<button class="btn btn-sm btn-danger" (click)="deleteBtnClicked(params.id)"><i class="fa fa-trash"></i></button>';
}

我在这做错了什么？

提前致谢

答案

它不起作用。您从函数返回的字符串不是使用Angular编译的。 ag-grid只是在网格内呈现为单元格渲染器。

您可以使用rowClicked事件处理它，如下所示。

// 1. Update your grid markup with row click event handler
(rowClicked)="_onRowClicked($event)"


// 2.handle the event in the component

_onRowClicked(e: RowClickedEvent) {
  if (e.event.srcElement !== undefined && e.event.srcElement.getAttribute('class') &&
         e.event.srcElement.getAttribute('class').indexOf('btn-danger') > -1) {

    const id = e.data.id;
    this.deleteBtnClicked(id);
  }
}

另一答案

试试这个：

optionsRendererFunc(params) {
    var button= document.createElement('button');
    console.log(params);
    button.innerhtml = 'Del';
    button.addEventListener('click', () => {
       // Write your code here
    });
    return button;
}

还将cellRenderer：this.optionsRendererFunc更新为cellRenderer：this.optionsRendererFunc.bind（this）

另一答案

试试这段代码：

像这样定义GridOptions，

columnDefs: [
        {headerName: 'Language Name', field: 'language_name' },
        {headerName: 'Options'
         template: `<button data-action-type="delete" type="button" >Delete</button>`
        }
    ]

对于RowClickEvent使用以下代码：

     onGridRowClicked(e: any) {
        if (e.event.target !== undefined) {
        let actionType = e.event.target.getAttribute("data-action-type");
        switch (actionType) {
            case "edit":
                {
                   // code to Edit
                }
            case "delete":
                {
                  // code to Delete
                }
        }
    }
}

单击编辑/删除按钮时，切换案例中的e.event.target.getAttribute（“data-action-type”）将重定向到正确的代码部分。