angular - TS2339 :Propert 'on' does not exist on type 'HTMLElement'

Question

我在 Angular 2 中使用 plotly 代码。我在以​​下代码中遇到错误。我提到了this code.

我的代码是:

var plotDiv = document.getElementById('myDiv');
plotDiv.on('plotly_relayout',
    function(eventdata){
      alert( 'ZOOM!' + '\n\n' +
        'Event data:' + '\n' +
        JSON.stringify(eventdata) + '\n\n' +
        'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' +
        'x-axis end:' + new Date(eventdata['xaxis.range[1]']));
      var xVal = new Date(eventdata['xaxis.range[0]']);
      var yVal = new Date(eventdata['xaxis.range[1]']);
    }
  );

我收到 plotDiv.on('....') 函数的错误。 angular 2 中的 .on() 是否有替代函数？请帮我。我卡在这里了。

Answer 1

为了防止这个错误你可以这样写:

var plotDiv: any = document.getElementById('myDiv');
plotDiv.on('plotly_relayout', ...

document.getElementById('myDiv') 返回 HTMLElement。此类型不包含方法 on，因为此方法是在 plotly-latest.min.js 中添加的。因此，为了消除 typescript 警告，您可以明确地说编译不检查 plotDiv

的类型

Plunker Example

另一种方法是创建类型定义，例如:

interface PlotHTMLElement extends HTMLElement  {
  on(eventName: string, handler: Function): void;
}

var plotDiv  = <PlotHTMLElement>document.getElementById('myDiv')
plotDiv.on('plotly_relayout', function() {

});