0

我有一个角度 ag-grid，我从那里创建了一个 cellRenderer 和 cellRendererParams。从 cellRenderer 我正在调用一个方法，该方法在 ag-grid 的每个单元格中创建一个按钮。

constructor(private notificationService: NotificationService) { }

ngOnInit() {
    this.columnDefs = [{
            headerName: "Action",
            field: "notificationId",
            width: 180,
            cellRenderer: this.notificationCellRendererFunc,
            cellRendererParams: {
              notificationId: 'notificationId'
            }
          }];
}

和通知CellRendererFunc：

notificationCellRendererFunc(params) {
    var self = this;
    var eSpan = document.createElement('button');
    console.log(params.value); // logs notificationId
    eSpan.innerHTML = 'Resend';
    eSpan.id = params.value;
    eSpan.addEventListener('click', function (eSpan) {
      alert(eSpan.toElement.id);
      var notificationFilter: any = {};
      notificationFilter.notificationId = eSpan.toElement.id;
      self.notificationService.ResendNotification(notificationFilter)
        .subscribe(
          (data: any) => {
            console.log('in save')
          },
          err => { console.log(err) }, // error
      );

    });
    return eSpan;
  }

在上面的方法中，我为每个按钮创建了 eventListener，这样当任何一个按钮点击时，它都会为我提供所选行的 notificationId，我可以将其发送到 API 进行进一步处理。

但问题是，'this' 关键字在 eventListener 内部不起作用，即使我将 'this' 分配给侦听器外部的 'self' 关键字。它说： 错误类型错误：无法读取 HTMLButtonElement 处未定义的属性“notificationService”。.

“我的 moto 是在 ag-grid 的每一行中创建一个按钮，点击按钮后它将重新发送通知。”

4

2 回答 2

0

您必须将您的对象绑定到该函数，以便您可以访问您的服务。有关更多信息，请参见此处：如何为 Angular 2 中的渲染元素绑定事件侦听器？

您的代码应如下所示： 

 eSpan.addEventListener('click', function (eSpan) {
          alert(eSpan.toElement.id);
          var notificationFilter: any = {};
          notificationFilter.notificationId = eSpan.toElement.id;
          this.notificationService.ResendNotification(notificationFilter)
            .subscribe(
              (data: any) => {
                console.log('in save')
              },
              err => { console.log(err) }, // error
          );

        }.bind(this));
于 2019-03-20T08:57:15.437 回答
0

因为您没有使用箭头功能。你可以做的是：

espan.addEventListener('click', () => {
 // Your code here
});

在这里查看这篇不错的文章：

https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26

于 2019-03-20T08:53:14.267 回答