Невозможно вызвать службу Angular 6 из HTML EventListener

У меня есть угловая аг-сетка, из которой я создал cellRenderer и cellRendererParams. И из cellRenderer я вызываю метод, который создает кнопку в каждой ячейке ag-сетки.

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 вне слушателя. Он говорит: ОШИБКА TypeError: Не удается прочитать свойство 'notificationService' из неопределенного в HTMLButtonElement..

«Мой девиз — создать кнопку в каждом ряду ag-сетки, и после нажатия кнопки будет повторно отправлено уведомление».


typescript angular ag-grid-angular
person Priyank Pahuja    schedule 20.03.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Потому что вы не используете функцию стрелки. Что вы можете сделать, так это:

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

Проверьте эту хорошую статью здесь:

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

person iamjc015    schedule 20.03.2019
comment
Да, я пытался это сделать, но все равно не сработало, я разместил ссылку на образец видео для того же самого. ">screencast.com/t/xtZAp4aVZ - person Priyank Pahuja; 20.03.2019

arrow_upward
0
arrow_downward

вам нужно привязать свой объект к функции, чтобы у вас был доступ к вашему сервису. Для получения дополнительной информации см. здесь: Как привязать событие слушатель визуализированных элементов в 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));
person MullisS    schedule 20.03.2019
comment
Я попытался привязать «это» к слушателю, но он не определен. Пожалуйста, посмотрите screencast.com/t/Ly5BKlL8x - person Priyank Pahuja; 20.03.2019
comment
В моей разметке была ошибка. .bind(this) принадлежит функции. Просто посмотрите на демо здесь: stackblitz.com/edit/angular-dnnylg - person MullisS; 20.03.2019
comment
.bind(this) у меня не сработал, поэтому я внес небольшое изменение в свой код и создал событие onCellClicked, проверил условие щелчка и выполнил свою работу. Но спасибо за вашу помощь @MullisS. - person Priyank Pahuja; 30.05.2019