“元素”类型上不存在属性“onclick”答案

【问题标题】：Property 'onclick' does not exist on type 'Element'“元素”类型上不存在属性“onclick”
【发布时间】：2019-12-15 18:58:55
【问题描述】：

我在 angular 中有以下组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-status',
  templateUrl: './status.component.html',
  styleUrls: ['./status.component.css']
})
export class StatusComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const acc = document.getElementsByClassName('accordion');
    let i;
    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            this.classList.toggle('active');
            this.nextElementSibling.classList.toggle('show');
      };
    }
  }

}

我正在从编译器中检索以下错误

src/app/components/status/status.component.ts(16,16) 中的错误：错误 TS2339：“元素”类型上不存在属性“onclick”。

尽管编译成功并且一切正常。

我应该忽略错误吗？

【问题讨论】：

抛开问题不谈，你做事的方式，你没有遵循“Angular way”。
我同意@Plochie。你最好采用有角度的方式来添加处理程序。原样的代码看起来像是在尝试使用一种更古老、更脆弱的 Web 应用程序编写方式。

标签： angular typescript

【解决方案1】：

您需要将其转换为HTMLElement

const acc: HTMLElement = document.getElementsByClassName('accordion') as HTMLElement;

【讨论】：

如果改成这个，它不起作用，出现错误属性'length' does not exist on type 'HTMLElement'
函数document.getElementsByClassName()返回一个列表。简短的方法是假设有一个元素，例如const acc = document.getElementsByClassName('accordion')[0] as HTMLElement。这“没问题”，但您冒着运行时异常的风险。您可以将其拆分为阶段并首先获取列表，然后检查是否有元素（.length > 0）然后使用elements[0] as HTMLElement 进行转换。

【解决方案2】：

正如上面提到的用户，您必须将其转换为 HTMLElement，但在 for 循环内。我没有评论的声誉，所以我再次回答。

  ngOnInit() {
    const acc = document.getElementsByClassName('accordion');
    let i;
    for (i = 0; i < acc.length; i++) {
        HTMLElement(acc[i]).onclick = function() {
            this.classList.toggle('active');
            this.nextElementSibling.classList.toggle('show');
      };
    }
  }

或者我宁愿推荐使用“addEventListener”函数，如果你仍然使用“document.getElementsByClassName”的话。

  ngOnInit() {
    const acc = document.getElementsByClassName('accordion');
    let i;
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click",function() {
            this.classList.toggle('active');
            this.nextElementSibling.classList.toggle('show');
      });
    }
  }

【讨论】：

我通过其他方式解决了，但使用 eventListener 似乎更正确。谢谢。