时间戳

首页 > 解决方案 > 从 REST API Get 方法中保存数据并再次使用它

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

  }
}

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

我检查了订阅之外的数组长度为零。

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

提前致谢。

标签： angularchart.jsrest

解决方案

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

所以你想对从 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
            }]
      })    
}

推荐阅读