TS2345：\'HTMLElement\' 类型的参数不可分配给 \'ChartItem\' 类型的参数

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，我有来自 charjs 的 NgChartModule，但对我没有任何作用

<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>

来自here，可以看到用法：

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
                ]
            }
        });
}