无法从 HTML EventListener 调用 Angular 6 服务

Question

我有一个角度 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'
            }
          }];
}

还有notificationCellRendererFunc：

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' 关键字。它说： 错误类型错误：无法读取未定义的属性“notificationService” 在 HTMLButtonElement..

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

Answer 1

因为你没有使用箭头功能。你可以这样做：

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

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

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

Answer 2

您必须将您的对象绑定到该函数，以便您可以访问您的服务。更多信息请看这里：How to bind event listener for rendered elements in 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));