javascript - 与 Angular typescript 一起使用时，属性'ClassList'在'GlobalEventHandlers'类型上不存在

我正在我的角度应用程序中实现可折叠。
我在.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";
        }
      }
    }
  }
}

工作很好，但我犯了个错误-
“GealLeaveEnthDand”不存在“属性类”列表。
“NeXsiBLIMEngEnter”不存在于“GualLeaveEngDeNeLeNS”类型。
我读过这个问题-Typescript compile error: Property 'classList' does not exist on type 'Node'但我找不到答案。
我对这段代码的完整实现是按照@SiddAjmera在-Collapsible of CSS and JS not working in Angular app上建议的前面的答案。
需要你的帮助。。。提前谢谢！

最佳答案

因为您已经知道元素是从函数范围之外的什么，所以如果我们将它赋给一个变量，您可以在函数内部访问它。

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

关于javascript - 与 Angular typescript 一起使用时，属性'ClassList'在'GlobalEventHandlers'类型上不存在，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56679594/