Angular 从RESTAPI 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',
            data: this.YValue,
            borderWidth: 1
        }]
    }    
});

  }
}

从“/sensors access.service”导入{SensorsAccessService}；
从“@angular/core”导入{Component，OnInit，OnChanges}；
从'node_modules/Chart.js'导入{Chart}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
标题='SensorsApp'；
传感器值：任意=[]；
Y值：数字[]=[]；
XValue:number[]=[]；
构造函数（私有数据服务：SensorsAccessService）{}
恩戈尼尼特（）{
this.DataService.getSensorValues（）
.订阅（（数据）=>{
此参数。传感器值=数据；
设i=0；
设j=0；
而（i{
console.log（错误）；
})
var myChart=新图表（“myChart1”{
键入：“行”，
数据：{
标签：this.XValue，
数据集：[{
标签：'曝光'，
数据：this.YValue，
边框宽度：1
}]
}    
});
}
}

如您所见，数据库中的数据保存到数组YValue和XValue中。 当我在订阅中绘制图表时，一切正常。 当我在订阅窗口外绘制图表时，什么也看不到

我检查了subscribe之外的数组的长度是否为零

这是一个问题，我可以在哪里存储（以及如何存储）数据库中的数据并在网页上使用它

提前感谢。

getSensorValues（）将返回一个observable，因此您需要订阅它来执行API调用。订阅的执行是异步的，因为api调用可能需要10毫秒、1秒或1分钟，这是不可预测的（这就是我们在这里使用observable的原因）

因此，必须在订阅中处理从obervabe接收到的数据。请注意这一点，因为有时异步执行会很快，并且您会认为订阅之外的执行正在工作，但是如果下次由于某种原因执行较慢，则会出现不必要的行为

我将给你两个提示：

• 拆分代码，在一个或多个单独的函数上移动所需的执行
• 不要在subscribe（）方法中使用代码，而是使用带有适当运算符的管道

ngOnInit（）{
这个.DataService.getSensorValues（）管道(
点击（数据=>createChartFromData（数据）），
catchError（错误=>{
console.log（错误）；
返回（）；
})
)
.subscribe（）
}
createChartFromData（数据）{
此参数。传感器值=数据；
设i=0；
设j=0；
而（i

getSensorValues（）正在返回一个observable，因此您需要订阅它来执行API调用。订阅的执行是异步的，因为API调用可能需要10毫秒、1秒或1分钟，这是不可预测的（这就是我们在这里使用observable的原因）

因此，您要对从obervabe接收到的数据执行的所有操作都必须在订阅中处理。请注意，因为有时异步执行会很快，您会认为订阅之外的执行正在工作，但如果由于某种原因，下次执行会变慢，则会出现不必要的行为或者

我将给你两个提示：

• 拆分代码，在一个或多个单独的函数上移动所需的执行
• 不要在subscribe（）方法中使用代码，而是使用带有适当运算符的管道

ngOnInit（）{
这个.DataService.getSensorValues（）管道(
点击（数据=>createChartFromData（数据）），
catchError（错误=>{
console.log（错误）；
返回（）；
})
)
.subscribe（）
}
createChartFromData（数据）{
此参数。传感器值=数据；
设i=0；
设j=0；
而（i

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
            }]
      })    
}