ChartJS - TypeError: Cannot read property '_model' of null - Angular

Question

我正在进行一个实时在 ChartJS 图表中显示数据的项目。从服务中，我从外部网络服务器获取数据。我成功地拥有 6 个数组（它们实时变化）并且总是有 10 个值：

for (const module of parsedListResults) {
  this._consoAir[module.id - 1].shift();
  this._consoAir[module.id - 1].push(module.consoAir);
}

所以每隔 5 秒，数据数组就会发生变化：

0: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
1: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
2: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
3: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
4: (10) [0, 0, 0, 0, 0, 0, 6.865885, 6.865885, 6.865885, 6.865885]
5: (10) [0, 0, 0, 0, 0, 0, 4.654, 4.654, 4.654, 4.654, _chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]
length: 6

图表显示在一个带有 id 的页面上。对于第 3 页，我们有 localhost:4200/lines/3，所以我们想要图表的第三个数组，我在这里这样做：

import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import { ChartType } from 'chart.js';
import { LineService } from '../services/line.service';
import {ActivatedRoute, Data} from '@angular/router';
import {combineLatest, Subscription} from 'rxjs';
import {filter, map} from 'rxjs/operators';

@Component({
  selector: 'app-conso-graph',
  templateUrl: './conso-graph.component.html',
  styleUrls: ['./conso-graph.component.scss']
})
export class ConsoGraphComponent implements OnDestroy{

  lineSubscription: Subscription;
  id: number;
  consoAir: number;
  chartType: ChartType;
  chartOptions: any;
  _time: any[] = Array(10).fill(0);
  _consoAir: any[];
  dataType: Data;

  constructor(private lineService: LineService,
              private route: ActivatedRoute) {
    this.chartIt();
    setInterval(() => {
     this.chartIt();
    }, 5000);
  }


  _focusedData$ = combineLatest(
    this.lineService.lineSubject.pipe(filter(x => x.length > 0)),
    this.route.params.pipe(filter(x => !!x.id), map(x => x.id - 1))
  ).pipe(
    map(([csvs, id]) => csvs[id])
  );


  gestionData(): void {
    this.lineSubscription = this._focusedData$.subscribe(x => this.id = x.id);
    this._consoAir = this.lineService._consoAir;
  }


  async chartIt(): Promise<void> {
    await this.gestionData();

    this.chartType = 'line';
    this.dataType = [{
      data: this._consoAir[this.id - 1],
      label: 'Consommation Air'
    }];

    console.log(this._consoAir[this.id - 1]);
  }

  chartClicked(e: any): void { }
  chartHovered(e: any): void { }

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

}

对于 HTML，我们有：

<div class="doubleTrp">
    <canvas baseChart
            [chartType]="chartType"
            [datasets]="dataType"
            [labels]="this._time"
            [colors]="[{
              backgroundColor: ['rgb(255, 182, 0)'],
              hoverBackgroundColor: ['rgb(185, 30, 30)'],
              borderWidth: 1
            }]"
            [options]="{
              responsive: true,
              cutoutPercentage: 100,
              animation: {
                duration: 0
              },
              title : {
                display: true,
                text: 'Consommation Air',
                fontSize: 25
              }
            }"
            [legend]="true"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
    </canvas>
</div>

问题不在于我在显示图表的页面时，问题在于当我转到其他页面（如 localhost4200/）时，出现此错误“错误类型错误：无法读取属性 '_model' of null"，我不知道该如何解决。

感谢您的回复，我完全迷路了。

Answer 1

为了找到问题，我在 html 模板中写入了数据数组...

我替换这个：

this.dataType = [{
  data: this._consoAir[this.id - 1],
  label: 'Consommation Air'
}];

通过这个在HTML :

<canvas baseChart
            [datasets]="[{
      data: this._consoAir[0],
            this._consoAir[1],
            ...
            this._consoAir[9],
      label: 'Consommation Air'
    }]"
...

ChartJS - TypeError: Cannot read property '_model' of null - Angular

ChartJS - TypeError: Cannot read property '_model' of null - Angular

angular

typescript

charts

chart.js

subscribe