Question

请让我知道我在做什么错

我的代码是：

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

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

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

谢谢。

Answer 1

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

从REST API Get方法保存数据并再使用一次

1 个答案: