“HTMLElement"类型上不存在属性“getContext" [英] Property 'getContext' does not exist on type 'HTMLElement'

问题描述

我正在 Angular8 中做一个项目并使用 ChartJS 创建图表.运行项目后，它将显示图表.但是会报错:

HTMLElement"类型上不存在属性getContext".

我如何摆脱这个错误?

这是我的代码:

chart.component.html

<canvas id="myChart";宽度=300 高度=300</canvas>

chart.component.ts

import {Component, OnInit} from '@angular/core';从'chart.js'导入{图表}；从'../charts/chart.service'导入{ChartService}；从 '@angular/common/http' 导入 {HttpClient}；//从 '../CHART/CHARTS.MODEL' 导入 {DATA};@成分({选择器:应用图表"，templateUrl: './charts.component.html',styleUrls: ['./charts.component.scss']})导出类 ChartsComponent 实现 OnInit {构造函数(私人图表项目:图表服务，私有 httpClient: HttpClient) { }ngOnInit() {this.getChartDetails();}getChartDetails() {this.ChartItems.getChart().subscribe(data => {控制台日志(数据)；const chartLable = [];const chartDetails = [];for (让 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 = 新图表(ctx，{类型:'酒吧'，数据: {标签:chartLable，数据集:[{label: '# of Votes',数据:图表详细信息，背景颜色: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)',],边框颜色: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)',],边框宽度:1}]},选项: {尺度:{y轴:[{刻度:{beginAtZero: 真}}]}}});});}}

chart.service.ts

import { Injectable } from '@angular/core';从@angular/common/http"导入 {HttpClient, HttpHeaders}；从 'rxjs' 导入 {Observable}；const httpOptions = {标头:新的 HttpHeaders({'内容类型':'应用程序/json'，})};@Injectable({提供在:'根'})导出类 ChartService {http选项:任意；baseUrl:任意；标题:任何；构造函数(私有 http:HttpClient){this.headers = new Headers( { 'content-type': 'application/json'} );//this.httpOptions = new RequestOptions( { headers: this.headers } );}获取图表(){console.log('成功!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');return this.http.get('https://api.myjson.com/bins/8au55',"");}}

解决方案

我会尝试:

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

Typescript 的目的是避免错误的类型.默认情况下 document.getElementById 返回一个 HTMLElement 类型，它是一个通用类型.为了让您的应用理解它是一个画布元素，您需要使用 语法投射它.

I am doing a project in Angular8 and creating charts using ChartJS. After running the project, it will show the charts. But it will give an error saying:

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

How do I get rid of this error?

Here is my code:

chart.component.html

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

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

chart.service.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',"");

}
}

解决方案

I would try:

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

the purpose of Typescript is to avoid wrong types. By default document.getElementById returns a HTMLElementtype which is a generic type. In order to make your app understand it is a canvas element you need to cast it using <CastedToType> syntax.

这篇关于“HTMLElement"类型上不存在属性“getContext"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！