如何为在 ag-grid 单元格渲染中动态创建的按钮引发事件？

Question

嗨，我正在使用 ag-grid angular2，我试图在我成功的每一行中放置一个按钮。当我单击该按钮时，我向按钮添加了一个事件侦听器，以便在单击此按钮时我想要引发事件。 这就是我向每一行添加按钮的方式

    {headerName: "Gold", field: "gold", width: 100,  cellRenderer: this.ageCellRendererFunc },

这里我正在为按钮编写 addeventlistener 逻辑

ageCellRendererFunc(params) {
    var eSpan = document.createElement('button');
    console.log(params);
    eSpan.innerHTML = 'Del';
    eSpan.addEventListener('click', function () {
        this.raiseevent();
    });
    return eSpan;
}

这是我想要在单击按钮时引发的事件

raiseevent(){
alert('code worked');
}

但它显示了一个错误，说 raiseevent 没有定义...我该如何纠正这个错误...我如何在 addeventListener 中提供事件的参考...有人请帮助我

Answer 1

这个网站：http://www.flyingtophat.co.uk/blog/2016/02/19/workaround-for-angular2-event-binding-in-ag-grid-cell-templates.html 有一个我认为对你有用的答案。这很难看，因为您必须监听通用的 onRowClicked 事件，然后检查该事件以确定按下了哪个按钮，但它应该可以工作。

例子：

<ag-grid-ng2 #agGrid class="ag-fresh"
    rowHeight="10"

    [columnDefs]="columnsDefs"
    [rowData]="rowData"

    (rowClicked)="onRowClicked($event)">
</ag-grid-ng2>

@Component({
    directives: [AgGridNg2],
    selector: "user-table",
    templateUrl: "../user-table.subhtml"
})
export class TableComponent {
    public columnDefs = [
        { headerName: "Username", field: "username" },
        { headerName: "Actions",
          suppressMenu: true,
          suppressSorting: true,
          template:
            `<button type="button" data-action-type="view" class="btn btn-default">
               View
             </button>

            <button type="button" data-action-type="remove" class="btn btn-default">
               Remove
            </button>`
        }
    ];

    public onRowClicked(e) {
        if (e.event.target !== undefined) {
            let data = e.data;
            let actionType = e.event.target.getAttribute("data-action-type");

            switch(actionType) {
                case "view":
                    return this.onActionViewClick(data);
                case "remove":
                    return this.onActionRemoveClick(data);
            }
        }
    }

    public onActionViewClick(data: any){
        console.log("View action clicked", data);
    }

    public onActionRemoveClick(data: any){
        console.log("Remove action clicked", data);
    }
}

Answer 2

使用=> 而不是function

eSpan.addEventListener('click', () => {

否则this 在调用回调时不会指向您的类。

另见https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions