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 compile error: Property 'classList' does not exist on type '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";
    }
  }
}

与角度打字稿一起使用时，属性'ClassList'在'GlobalEventHandlers'类型上不存在

1 个答案: