时间戳

首页 > 解决方案 > main.js:1 错误类型错误：无法读取 null 的属性“querySelectorAll”

javascript - main.js:1 错误类型错误：无法读取 null 的属性“querySelectorAll”

问题描述

我正在使用带有角度的 Chartist 来创建图表。问题是当我运行服务器时我的图表不显示，并且我在控制台上收到此错误。当我刷新页面时，图表会出现。我该如何解决这个问题？我在控制台上打印了数据以检查它们是否正确。

line.component.ts 文件

        import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
    import { ChartData } from '../chart.data.namespace';
    import * as Chartist from 'chartist';
    import { NChartist } from '../NChartist.namespace';
    import {
      IBarChartOptions,
      IChartistAnimationOptions,
      IChartistData
    } from 'chartist';
    
    @Component({
      selector: 'app-line',
      templateUrl: './line.component.html',
      styleUrls: ['./line.component.css'],
      encapsulation:ViewEncapsulation.None,
    })
    export class LineComponent implements OnInit {
      chartline: any;
      @Input() data: ChartData.LabelValue[];
      constructor() {
      }
    
      ngOnInit() {
    
        this.createLineChart();
      }
      createLineChart() {
        let linedata: NChartist.Data = new NChartist.Data();
    
        this.prepareLineData(linedata);
        const prepared_l_data = {
          series: [linedata.series],
          labels: linedata.labels,
        }
        this.chartline = new Chartist.Line('.ct-chart-line', prepared_l_data,{})
        console.log(this.chartline);
        this.chartline.update();
        this.startAnimationForLineChart(this.chartline);
    
    
    
    
      }
      prepareLineData(linedata) {
        for (let i = 0; i < this.data.length; i++) {
          linedata.series[i] = this.data[i].value;
          linedata.labels[i] = this.data[i].label;
        }
      }
    
      startAnimationForLineChart(chart){
        let seq: any, delays: any, durations: any;
        seq = 0;
        delays = 80;
        durations = 500;
    
        chart.on('draw', function(data) {
          if(data.type === 'line' || data.type === 'area') {
            data.element.animate({
              d: {
                begin: 600,
                dur: 700,
                from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                to: data.path.clone().stringify(),
                easing: Chartist.Svg.Easing.easeOutQuint
              }
            });
          } else if(data.type === 'point') {
                seq++;
                data.element.animate({
                  opacity: {
                    begin: seq * delays,
                    dur: durations,
                    from: 0,
                    to: 1,
                    easing: 'ease'
                  }
                });
            }
        });
    
        seq = 0;
    };
    
    
    
    }

line.component.html

 <body>
    <div class="card card-chart">
        <div class="card-header card-header-warning">
            <div class="ct-chart-line" id="chartline"></div>
        </div>
        <div class="card-body">
            <h4 class="card-title">Line Chart</h4>
            <p class="card-category">
                <span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today
                sales.
            </p>
        </div>
        <div class="card-footer">
            <div class="stats">
                <i class="material-icons">access_time</i> updated 4 minutes ago
            </div>
        </div>
    </div>
</body>

标签： javascriptangularchartist.js

解决方案

当您调用 createLineChart() 时，您必须确保所有 html 都是完整的。ngOnInit() 不是调用查询选择器的最佳循环钩子。尝试在 ngAfterViewInit() 方法中调用它，而不要忘记实现 AfterViewInit ：

export class LineComponent implements OnInit, AfterViewInit

ngAfterViewInit(){
this.createLineChart();
}

推荐阅读