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

Posted 2023-03-09

【中文标题】错误 TypeError：无法读取未定义的属性（读取“跳过”）Typescript/Api

【英文标题】：ERROR TypeError: Cannot read properties of undefined (reading 'skip') Typescript/Api

【发布时间】：2022-01-20 05:10:53

【问题描述】：

图表在我的项目中使用 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();
  

 

【参考方案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();
  

 

【讨论】：

请把答案的具体细节而不是写整个代码。