TS2345：类型"HTMLElement"的参数不能分配给类型为"图表项"的参数

Question

我正在开发一个Angular仪表板，我发现这个错误不能让我渲染面积图

import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';
@Component({
selector: 'app-widget-area',
templateUrl: './area.component.html',
styleUrls: ['./area.component.scss']
})
export class AreaComponent implements AfterViewInit {

constructor() {}
ngAfterViewInit() {
let elem: HTMLElement;
const ctx = document.getElementById("myChart") as HTMLElement;
if (ctx) {
elem = ctx;
const myChart = new Chart(elem, {
data: {
datasets: [
{ fill: 'origin' },      // 0: fill to 'origin'
{ fill: '+2' },         // 1: fill to dataset 3
{ fill: 1 },             // 2: fill to dataset 1
{ fill: false },         // 3: no fill
{ fill: '-2' },          // 4: fill to dataset 2
{ fill: { value: 25 } }    // 5: fill to axis value 25
]
}
});
}
}

并得到这个错误:

TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'ChartItem'.
Type 'HTMLElement' is missing the following properties from type 'HTMLCanvasElement': height, width, captureStream, getContext, and 2 more.

我已经尝试了所有的互联网的东西，没有为我工作，有人有同样的错误吗?顺便说一下，这是我的简单的html，我有我的NgChartModule从charjs和没有工作为我

<div>
<div style="display: block">
<canvas id="myChart " ></canvas>
</div>
</div>

Answer 1

Chart类的构造函数取第一个参数(item)为ChartItem类型，其中ChartItem的类型为:

ChartItem: string | CanvasRenderingContext2D | HTMLCanvasElement | { canvas: HTMLCanvasElement } | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>

从这里，您可以看到用法:

const ctx = document.getElementById('myChart');
const ctx = document.getElementById('myChart').getContext('2d');
const ctx = $('#myChart');
const ctx = 'myChart';

const ctx = document.getElementById("myChart");
if (ctx) {
const myChart = new Chart(ctx, {
data: {
datasets: [
{ fill: 'origin' },      // 0: fill to 'origin'
{ fill: '+2' },         // 1: fill to dataset 3
{ fill: 1 },             // 2: fill to dataset 1
{ fill: false },         // 3: no fill
{ fill: '-2' },          // 4: fill to dataset 2
{ fill: { value: 25 } }    // 5: fill to axis value 25
]
}
});
}