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

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

2 个答案: