Невозможно вызвать Сервис Angular 6 из HTML EventListener - PullRequest
Новая
       13

Невозможно вызвать Сервис Angular 6 из HTML EventListener

0 голосов
/ 20 марта 2019

У меня есть угловая ag-сетка, из которой я создал 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 для каждой кнопки, чтобы при нажатии любой из кнопок она предоставляла мне уведомление о выбранной строке и я мог отправить его в API для дальнейшей обработки.

Но проблема в том, что ключевое слово 'this' не работает внутри eventListener, даже если я назначаю ключевое слово 'this' для себя 'за пределами слушателя. Это говорит: ОШИБКА TypeError: Не удалось прочитать свойство в HTMLButtonElement. .

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

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Вы должны привязать свой объект к функции, чтобы иметь доступ к вашему сервису.Для получения дополнительной информации смотрите здесь: Как связать обработчик событий для визуализированных элементов в 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));
0 голосов
/ 20 марта 2019

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

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

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

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

...