如何在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);
    }
}