свойство classList не существует для типа «GlobalEventHandlers» при использовании с угловым машинописным шрифтом

Question

Я реализую Collapsible в своем угловом приложении.

Я написал CSS в файле .css и HTML в файле .html.И JS я закодировал в .ts файл согласно следующему коду.

export class HelpComponent implements OnInit {
  acc = document.getElementsByClassName("accordion") as HTMLCollectionOf < HTMLElement > ;
  constructor() {}

  ngOnInit() {
    for (let i = 0; i < this.acc.length; i++) {
      ( < HTMLButtonElement > this.acc[i]).onclick = function() {
        this.classList.toggle("active");
        var panel = < HTMLDivElement > this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      }
    }
  }
}

Работает нормально, но я получаю ошибку, так как -

"Свойство classList не существуетдля типа «GlobalEventHandlers» и «nextSiblingElement не существует для типа« GlobalEventHandlers »».

Я прочитал этот вопрос - Ошибка компиляции Typescript: Свойство 'classList' не существует для типа 'Узел ', но я не нашел ответа.

Моя полная реализация этого кода соответствует предыдущему ответу, предложенному @SiddAjmera для - Разборный из CSS и JS не работает в приложении Angular .

Нужна ваша помощь ... Заранее спасибо!

Answer 1

Поскольку вы уже знаете, что за элемент находится за пределами области действия функции, если мы присвоим его переменной, вы можете получить к нему доступ внутри функции.

for (let i = 0; i < this.acc.length; i++) {
  const el = < HTMLButtonElement >this.acc[i];
  el.onclick = function() {
    el.classList.toggle("active");
    var panel = < HTMLDivElement > el.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}