angular - ChartJS - TypeError:无法读取 null 的属性“_model” - Angular
问题描述
我正在进行一个在 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”,我不知道我该如何解决。
感谢您的回复,我完全迷路了。
解决方案
为了找到问题,我在我的 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'
}]"
...
推荐阅读
- javascript - 将对象作为 useEffect 依赖项在每次渲染时触发回调
- macos - 如何从任何网络登录 Jenkins
- reactjs - 代码审查:TS React 应用 UI 语言状态实现
- optaplanner - 时间链式实施
- python-3.x - 如何在 google colaboratory 中使用 processing.py
- git - 如何将 Bitbucket git 克隆到 cPanel Git™ 版本控制中
- go - 使用 gopacket 测量 TCP/UDP 带宽
- java - 操作系统命令注入(CWE ID 78)(1 个缺陷)Java 代码
- javascript - 使用 Javascript 删除 XML 标头
- php - PHP宏/将字段组合成一个变量