错误 TypeError：无法读取未定义的属性（读取“跳过”）Typescript/Api

Question

图表在我的项目中使用 Api 获取数据进行初始化。当页面打开但条形图未打开时，Chart.js 饼图会使用数据进行初始化。我需要点击图例标签。之后我可以看到结果。 当我查看控制台时，它会出现以下错误。我无法理解这个问题。

错误

    at parseVisibleItems (core.interaction.js:39)
    at getIntersectItems (core.interaction.js:55)
    at indexMode (core.interaction.js:117)
    at Chart.getElementsAtEventForMode (core.controller.js:643)
    at Chart.handleEvent (core.controller.js:863)
    at Chart.eventHandler (core.controller.js:821)
    at listener (core.controller.js:758)
    at HTMLCanvasElement.proxies.<computed> (platform.dom.js:410)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28664)

When page is opened

After I click the TL legend

组件.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Data } from '@angular/router';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { SharedService } from '../../../@core/utils/shared.service';
import { Chart } from 'chart.js';  



@Component({
  selector: 'ngx-chartjs-bar-yearlyTL',
  template: `<canvas id="bartlcanvas"></canvas>`,
})
export class ChartjsYearBarComponent implements OnInit, OnDestroy {

  options: any;
  data: Data[];  
  dataArrayTL = [];  
  dataLabel1 = [];
  chart = [];
  themeSubscription: any;

  constructor(private service :SharedService,private theme: NbThemeService) {}

  getTL(){
    this.service.getYearlyTLIncome().subscribe((result: Data[]) =>
    { result.forEach(x => { 
        this.dataLabel1.push(x.YIL);
        this.dataArrayTL.push(x.DOVIZLI);  
    });  
    });  
  }
  ngOnInit():void{
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
    
         this.getTL();
        this.chart = new Chart('bartlcanvas',{
          type: 'bar',
          data: {
            labels: this.dataLabel1,
            datasets: [{
              data:this.dataArrayTL,
              label: 'TL',
              backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
              borderColor: colors.info
            }],
          },
    
          options : {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
              labels: {
                fontColor: chartjs.textColor,
              },
            },
            scales: {
              xAxes: [
                {
                  gridLines: {
                    display: true,
                    color: chartjs.axisLineColor,
                  },
                  ticks: {
                    fontColor: chartjs.textColor,
                  },
                },
              ],
              yAxes: [
                {
                  gridLines: {
                    display: true,
                    color: chartjs.axisLineColor,
                  },
                  ticks: {
                    fontColor: chartjs.textColor,
                  },
                }
              ],
             
            },

          }
       });    
      });
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }

 

}

Answer 1

当我从 Service.ts 调用数据时，我在 ngOnit 中创建了一个函数，它无法提取变量并且打开页面时图表为空白。换句话说，它是把数据扔进数组，但是当页面第二次刷新时，它是把数据传送到图表中的。我没有创建函数，而是直接调用数据并同时将数据绑定到图形。因此，我已经修复了未定义属性的错误。 我不知道这是否是正确的方法，但它解决了我的问题并且我没有收到任何错误。

解决方案

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Data } from '@angular/router';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { SharedService } from '../../../@core/utils/shared.service';
import { Chart } from 'chart.js';  



@Component({
  selector: 'ngx-chartjs-bar-yearlyTL',
  template: `<canvas id="bartlcanvas"></canvas>`,
})
export class ChartjsYearBarComponent implements OnInit, OnDestroy {

  options: any;
  data: Data[];  
  dataArrayTL = [];  
  dataLabel1 = [];
  chart = [];
  themeSubscription: any;

  constructor(private service :SharedService,private theme: NbThemeService) {}

  
    ***this.service.getYearlyTLIncome().subscribe((result: Data[]) =>
    { result.forEach(x => { 
        this.dataLabel1.push(x.YIL);
        this.dataArrayTL.push(x.DOVIZLI);  
    });***  <<<<< here
    
  
  ngOnInit():void{
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
    
         this.getTL();
        this.chart = new Chart('bartlcanvas',{
          type: 'bar',
          data: {
            labels: this.dataLabel1,
            datasets: [{
              data:this.dataArrayTL,
              label: 'TL',
              backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
              borderColor: colors.info
            }],
          },
    
          options : {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
              labels: {
                fontColor: chartjs.textColor,
              },
            },
            scales: {
              xAxes: [
                {
                  gridLines: {
                    display: true,
                    color: chartjs.axisLineColor,
                  },
                  ticks: {
                    fontColor: chartjs.textColor,
                  },
                },
              ],
              yAxes: [
                {
                  gridLines: {
                    display: true,
                    color: chartjs.axisLineColor,
                  },
                  ticks: {
                    fontColor: chartjs.textColor,
                  },
                }
              ],
             
            },

          }
       });    
      });
 ***});*** <<<<<< here 
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }

 

}