與角度打字稿一起使用時，類型“GlobalEventHandlers”上不存在屬性 classList

Question

我正在我的角度應用程序中實現可折疊。

我在.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";
        }
      }
    }
  }
}

它工作正常，但我收到錯誤 -

“'GlobalEventHandlers' 類型不存在屬性 classList，'GlobalEventHandlers' 類型不存在 nextSiblingElement”。

我已經閱讀了這個問題 - Typescript 編譯錯誤：屬性 'classList' 在類型 'Node' 上不存在，但我找不到答案。

我對這段代碼的完整實現是根據@SiddAjmera 在-Collapsible of CSS and JS not working in Angular app上建議的先前答案。

需要您的幫助...提前致謝！

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";
    }
  }
}