angular - 属性 'getContext' 在类型 'HTMLElement' 上不存在

Question

我正在 Angular8 中做一个项目并使用 ChartJS 创建图表。运行项目后，它将显示图表。但它会给出一个错误说:

Property 'getContext' does not exist on type 'HTMLElement'.

我如何摆脱这个错误？
这是我的代码:
图表.component.html

<div id="container" style="width:350px;height:250px">
  <canvas id="myChart" width=300 height=300></canvas>   
</div>

图表组件.ts

import {Component, OnInit} from '@angular/core';
import {Chart} from 'chart.js';
import {ChartService} from '../charts/chart.service';
import {HttpClient} from '@angular/common/http';

// import {DATA} from '../CHART/CHARTS.MODEL';

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

  constructor(
    private ChartItems: ChartService,
    private httpClient: HttpClient
  ) {   }

  ngOnInit() {
    this.getChartDetails();
}

  getChartDetails() {
    this.ChartItems.getChart().subscribe(data => {
      console.log(data);
      const chartLable = [];
      const chartDetails = [];

      for (let i = 0; i < data.chartDetails[0].chartData.length; i++) {
        chartLable.push(data.chartDetails[0].chartData[i].x);
        chartDetails.push(data.chartDetails[0].chartData[i].y);
      }

 

      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: chartLable,
              datasets: [{
                  label: '# of Votes',
                  data: chartDetails,
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                  ],
                  borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero: true
                      }
                  }]
              }
          }
      });
  }
  );
 
}}

图表服务.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    })
};

@Injectable({
  providedIn: 'root'
})
export class ChartService {

  httpOptions: any;
  baseUrl: any;
  headers: any;
  constructor( private http: HttpClient ) {
      this.headers = new Headers( { 'content-type': 'application/json'} );
      // this.httpOptions = new RequestOptions( { headers: this.headers } );
}

  getChart() {
    console.log('SUCCESS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
    return this.http.get('https://api.myjson.com/bins/8au55',"");

}
}

Answer 1

我会尝试:

const canvas = <HTMLCanvasElement> document.getElementById('myChart');
const ctx = canvas.getContext('2d');

Typescript 的目的是避免错误的类型。默认 document.getElementById返回 HTMLElement type 是泛型类型。
为了让您的应用程序理解它是一个 Canvas 元素，您需要 Actor 它使用 <CastedToType>句法。