Добавление прослушивателя событий для компонента с подсветкой внутри машинописи

Question

Я успешно добавил список событий для моего компонента элемента Lit внутри моего кода Typescript:

async firstUpdated() {
  await this.updateComplete;

  // Add an event listener to our event-search component so we can switch the current event
  const eventSearch = document.querySelector('event-search');
  if(typeof eventSearch !== 'undefined') {
    eventSearch.addEventListener('select', this.changeCurrentEvent);
  }
}

async changeCurrentEvent(event) {
  await this.fetchTickets(event.id);
  this.currentEvent = event;
}

async fetchTickets(eventId: number) {
  try {
    this.tickets = await fetchData(ticketEndpoint(eventId))
  } catch (error) {}
}

Однако при выполнении события я получаю следующую ошибку:

Uncaught (in promise) TypeError: this.fetchTickets is not a function at HTMLElement.<anonymous>

Очевидно, он попадает в функцию changeCurrentEvent, но не может найти функцию fetchTickets.

Answer 1

Вы можете использовать синтаксис функции стрелки ES6, чтобы избежать необходимости писать this.changeCurrentEvent.bind(this).

changeCurrentEvent = async (event) => {
  await this.fetchTickets(event.id);
  this.currentEvent = event;
}