从 REST API Get 方法保存数据并再次使用它答案

【问题标题】：Save data from REST API Get method and use it one more time从 REST API Get 方法保存数据并再次使用它
【发布时间】：2020-08-23 19:01:52
【问题描述】：

请让我知道我做错了什么。

我的代码是：

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 中。当我在订阅中绘制图表时，一切正常。当我在订阅之外绘制图表时，什么也看不到。

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

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

提前致谢。

【问题讨论】：

标签： angular chart.js rest

【解决方案1】：

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

【讨论】：