如何解决从REST API Get方法保存数据并再使用一次
请让我知道我在做什么错
我的代码是:
import { SensorsAccessService } from './sensors-access.service';
import { Component,OnInit,OnChanges } from '@angular/core';
import { Chart } from 'node_modules/chart.js';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'SensorsApp';
sensorsValues: any = [];
YValue: number[] = [];
XValue: number[] = [];
constructor(private DataService: SensorsAccessService) {}
ngOnInit() {
this.DataService.getSensorValues()
.subscribe((data) => {
this.sensorsValues = data;
let i = 0;
let j = 0;
while( i < this.sensorsValues.length) {
if(this.sensorsValues[i].kindOfSensor == 'Exposure') {
this.YValue.push(this.sensorsValues[i].y);
this.XValue.push(j);
j = j + 1;
}
i = i + 1;
}
var myChart = new Chart("myChart2",{
type: 'line',data: {
labels: this.XValue,datasets: [{
label: 'Exposure',data: this.YValue,borderWidth: 1
}]
}
});
},error => {
console.log(error);
})
var myChart = new Chart("myChart1",{
type: 'line',data: {
labels: this.XValue,datasets: [{
label: 'Exposure',borderWidth: 1
}]
}
});
}
}
因此您可以看到来自数据库的数据保存到数组YValue和XValue。 当我在订阅中绘制图表时,一切正常。 当我在订阅之外绘制图表时,什么也看不到。
我检查了外部订阅的数组的长度为零。
这是一个问题,我可以在哪里存储(以及如何存储)数据库中的数据并在网页上使用它们。
谢谢。
解决方法
getSensorValues()返回一个可观察值,因此您需要订阅它才能进行API调用。订阅的执行是异步,因为api调用可能需要10毫秒,1秒或1分钟,因此这是不可预测的(这就是我们在此处使用可观察的原因)。
因此,您要处理从obervabe接收的数据的所有操作都必须在订阅中处理。请注意,因为有时异步执行会很快,并且您会认为订阅之外的执行正在工作,但是如果由于某种原因执行速度较慢,那么您将有不想要的行为。
我会给你2条提示:
- 分割代码,将所需的执行移至一个或多个分割的函数上
- 请勿在subscribe()方法中使用代码,而应使用带有适当运算符的管道
ngOnInit() {
this.DataService.getSensorValues().pipe(
tap(data => createChartFromData(data)),catchError(error => {
console.log(error);
return of();
})
)
.subscribe()
}
createChartFromData(data) {
this.sensorsValues = data;
let i = 0;
let j = 0;
while( i < this.sensorsValues.length) {
if(this.sensorsValues[i].kindOfSensor == 'Exposure') {
this.YValue.push(this.sensorsValues[i].y);
this.XValue.push(j);
j = j + 1;
}
i = i + 1;
}
let myChart = new Chart("myChart2",{
type: 'line',data: {
labels: this.XValue,datasets: [{
label: 'Exposure',data: this.YValue,borderWidth: 1
}]
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。