typescript 如何为在 ag-grid 单元格渲染中动态创建的按钮引发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36276103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can raise events for the buttons created dynamically in ag-grid cell-rendered?
提问by abhilash reddy
Hie I am using ag-grid angular2 where i am trying to place a button in every row which i am successful.when i click on that button i adding an event listener to the button so that when this button is clicked i want to raise an event. This is how i am adding buttons to every row
嗨，我正在使用 ag-grid angular2，我试图在我成功的每一行中放置一个按钮。当我单击该按钮时，我向该按钮添加了一个事件侦听器，以便在单击该按钮时我想引发一个事件。这就是我向每一行添加按钮的方式
{headerName: "Gold", field: "gold", width: 100, cellRenderer: this.ageCellRendererFunc },
Here i am writing the addeventlistener logic for the button
在这里，我正在为按钮编写 addeventlistener 逻辑
ageCellRendererFunc(params) {
var eSpan = document.createElement('button');
console.log(params);
eSpan.innerHTML = 'Del';
eSpan.addEventListener('click', function () {
this.raiseevent();
});
return eSpan;
}
This is the event which i want to raise when the button is clicked
这是我想在单击按钮时引发的事件
raiseevent(){
alert('code worked');
}
But it is showing an error saying raiseevent is not defined...How can i correct this mistake...How can i give the reference of an event inside addeventListener...Somebody please help me
但它显示一个错误，说 raiseevent 未定义......我该如何纠正这个错误......我如何在 addeventListener 中提供事件的引用......有人请帮助我
回答by user3089280
This site: http://www.flyingtophat.co.uk/blog/2016/02/19/workaround-for-angular2-event-binding-in-ag-grid-cell-templates.htmlhas an answer that I think will work for you. It is ugly because you have to listen to the generic onRowClicked event and then inspect the event to identify what button got pressed, but it should work.
这个网站：http: //www.flyingtophat.co.uk/blog/2016/02/19/workaround-for-angular2-event-binding-in-ag-grid-cell-templates.html有一个我认为的答案会为你工作。这很丑陋，因为您必须监听通用的 onRowClicked 事件，然后检查该事件以确定按下了哪个按钮，但它应该可以工作。
Example:
例子：
<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);
}
}
回答by Günter Z?chbauer
Use =>instead of function
使用=>代替function
eSpan.addEventListener('click', () => {
otherwise thisdoesn't point to your class when the callback is called.
否则this在调用回调时不指向您的类。
See also https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions
另见https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions
