ag-grid cellRenderer 元素的操作不起作用答案

【问题标题】：action of ag-grid cellRenderer element not workingag-grid cellRenderer 元素的操作不起作用
【发布时间】：2019-02-09 09:53:09
【问题描述】：

我正在尝试使我的删除按钮在我的 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>';
}

我在这里做错了什么？

提前致谢

【问题讨论】：

单击删除按钮时控制台是否出现错误？
@Ritesh 不，控制台中没有一条线索。
你能分享你更新的代码吗？
@Ritesh 我刚刚用您的解决方案更改了我的optionsRendererFunc，在//Write your code here 中，我添加了this.deleteBtnClicked(params.id)，仅此而已。
你能不能把 cellRenderer: this.optionsRendererFunc 改成 cellRenderer: this.optionsRendererFunc.bind(this) 看看？

标签： angular datatables event-handling angular6 ag-grid

【解决方案1】：

这样不行。您从函数返回的字符串不是用 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);
  }
}

【讨论】：

那么，在您的解决方案中，基本上是在单击行上的任意位置时触发事件？然后找出导致触发的源元素？如果我在同一行上有另一个按钮，我需要再次找到该特定按钮的来源以执行不同的操作？你确定这是干净的方法吗？
请解释您的代码，除非您的解决方案没有价值。

【解决方案2】：

试试这个：

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)

【讨论】：

上面写着 > ERROR TypeError: Cannot read property 'deleteBtnClicked' of undefined
我需要让它与多个元素一起工作，例如两个按钮，请给出解决方案。

【解决方案3】：

试试这个代码：

像这样定义 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") 将重定向到正确的代码部分。

【讨论】：

这有一个简单的问题是，如果我的按钮中有一个图标，如果我点击图标没有任何反应，但是如果我点击按钮然后工作正常，不要傻，但这真的对我来说是个问题。
你可以编写一个css类并处理它。我认为对于上述问题，这个答案有效