Question

在函数getPrognoseData（）中，我从http调用一些数据。日志显示数据存在。但是，如果我继续在名为showFnct(0,this.dataArray)的另一个函数中处理数据，则日志

console.log("Array:",nnn)
console.log("Array[0]:",nnn[0])

告诉我数据未定义（或不存在）：

Array[0]: undefined
leistung.component.ts:81 Value: 0
leistung.component.ts:83 actual data: undefined

我在做什么错了？

ngOnInit() {

    this.dataArray = this.getPrognoseData();
    console.log("Leistung Chart Daten:",this.dataArray);
    this.actualData = this.showFnct(0,this.dataArray);

  }

  showFnct(value, array) {
    var nnn = array;
    console.log("Array:",nnn)
    console.log("Array[0]:",nnn[0])
    console.log("Value:",value);
    this.actualData= array[0];
    console.log("actual data:",this.actualData);

    for (var elem of array) {
      for (var subElem of elem.series) {
        if (subElem.value > this.maxValue) {
          this.maxValue = subElem.value;
        }
        if (subElem.value < this.minValue) {
          this.minValue = subElem.value;
        }        
      }      
    }
    var range = this.maxValue - this.minValue;
    this.maxOffset = this.maxValue + range*0.1;
    this.minOffset = this.minValue - range*0.1;
    console.log("minoffset:",this.minOffset)
    console.log("Nowdata:",this.actualData);
    return this.actualData;
  }

这是getPrognoseData（）的实现：

getPrognoseData() {
    //dummy-data
    var startTime = '2018-06-23T00:44:55';
    var endTime = '2018-09-30T14:00:55';
    var id = '123456789';
    //http://localhost:3452/edit/2018-07-23T00:44:55.2018-07-30T14:00:55.987654321
    //Builds Prognose-Daten-Graph
    this.http.get<any>(`http://localhost:5555/Demonstrator/` + id + "." + startTime + "." + endTime, {observe: 'response'}
    ).subscribe(resp => {
      if (resp.status === 200) {
        console.log("Verlauf el. Leistung: ", resp.body);
        var elLeistung = [];
        var elNFLeistung = [];
        for (var elem of resp.body) {
          elLeistung = elLeistung.concat(elem["aktElErzeugungsleistung"]);
          elNFLeistung = elNFLeistung.concat(elem.aktElNachfrageleistung);
        }
        elLeistung.sort(function(a,b){return new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime()});
        elNFLeistung.sort(function(a,b){return new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime()});
        console.log("elLeistung:",elLeistung);

        let aktElEZLeistung = elLeistung;//resp.body[0]["aktElErzeugungsleistung"];
        let aktElNFLeistung = elNFLeistung;//resp.body[0]["aktElNachfrageleistung"];
        let maxValue = -10000000;
        let minValue = +10000000;
        //Erzeuge NGX Chart Daten für aktuelle elekt. Erzeugungsleistung:
        //this.aktElLeistung.name = "aktElEZLeistung";
        var aktElEZLeistungDok: any = {
          name: "erzeugte Leistung",
          series: [],
        }
        for (let i = 0; i<aktElEZLeistung.length; i++) {
          this.newData = {
            name: new Date(aktElEZLeistung[i]["Timestamp"]),
            value: aktElEZLeistung[i]["Betriebswert"]
          }
          aktElEZLeistungDok.series.push(this.newData);
        }

        this.dataArray.push(aktElEZLeistungDok)

        var aktElNFLeistungDok: any= {
          name: "nachgefragte Leistung",
          series: [],
        }
        for (let i = 0; i<aktElNFLeistung.length; i++) {
          this.newData = {
            name: new Date(aktElNFLeistung[i]["Timestamp"]),
            value: aktElNFLeistung[i]["Betriebswert"]
          }
          aktElNFLeistungDok.series.push(this.newData);
        }
        this.dataArray.push(aktElNFLeistungDok)


        var aktElLeistung: any = {
          name: "elektr. Leistung",
          series: [],
        }
        for (let i = 0; i<aktElEZLeistung.length; i++) {
          this.newData = {
            name: new Date(aktElEZLeistung[i]["Timestamp"]),
            value: aktElEZLeistung[i]["Betriebswert"]-aktElNFLeistung[i]["Betriebswert"]
          }
          if (this.newData.value >= maxValue) {
            maxValue = this.newData.value;
          }
          if (this.newData.value <= minValue) {
            minValue =this.newData.value;
          }   

          aktElLeistung.series.push(this.newData);
        }
        var offset = 50;
        this.minOffset = minValue - offset;
        this.maxOffset = maxValue + offset;
        this.dataArray.push(aktElLeistung);
        this.actualData = this.dataArray;
        console.log("El Leistung:", this.dataArray);

        //Abschnitt für Fahrplanprognose Daten
        var fpdata;
        //http://localhost:5555/DNZ/FP/2018-07-23T00:44:55.2018-07-30T14:00:55.987654321
        this.http.get('http://localhost:342/'+id+'.'+startTime+'.'+endTime)
        .subscribe(
          data => { fpdata = data; console.log("FPData:",fpdata);
          var progBW: any = {
            name: "progn. Betriebswert",
            series: [],
          }
          for (let i = 0; i<fpdata.length; i++) {
            this.newData = {
              name: new Date(fpdata[i]["Timestamp"]),
              value:  fpdata[i]["PrognostizierterBetriebswert"],
            }
            progBW.series.push(this.newData);
          }
          this.dataArray.push(progBW);
          this.actualData = this.dataArray;
          console.log("DataArray elLeistung und ProgBW:", this.dataArray);
        },
          err => console.error(err)
        );

      } else {
        console.log('error bei verbindung');
      };

    });
    console.log("Data Array progBW und El Leistung:",this.dataArray);
    /this.dataArray;*/
    return this.dataArray
    }

解释最后一种方法：我基本上是在做2个HTTP请求...而对于这两个我来说，我基本上都是在创建一些文档{name：... series：[]}以适合基于http的ngx图表数据格式数据...并将它们推入数组dataArray ...

Answer 1

此问题是，在调用getPrognoseData()之前，您没有等待this.showFnct(0,this.dataArray);返回其数据

您可以从Observable返回getPrognoseData()并在OnInit()内订阅。完成后，您可以致电this.showFnct(0,this.dataArray);

代码：

ngOnInit() {
    this.getPrognoseData().subscribe((data)=> {
       this.dataArray = data;
       console.log("Leistung Chart Daten:",this.dataArray);
       this.actualData = this.showFnct(0,this.dataArray);
    });
}


getPrognoseData() {
    ................
  return this.http.get<any>(`http://localhost:5555/Demonstrator/` + id + "." + startTime + "." + endTime, {observe: 'response'}
    ).switchMap(resp => {
        ..................
       return this.http.get('http://localhost:342/'+id+'.'+startTime+'.'+endTime)
        .map(
        (data) => {
          ........................
          return this.dataArray;
        },
          err => console.error(err)
        );
      .................................
    });
}

Answer 2

这是由于javascript的异步性质而发生的。直到函数getPrognoseData（）返回数据为止，下一行this.actualData = this.showFnct（0，this.dataArray）;调用函数showFnct（），并且dataArray不包含任何值，因为getPrognoseData（）仍在运行并且不发送任何响应。所以在这里使用诺言：

 this.dataArray = this.getPrognoseData().then(function(response){
     this.actualData = this.showFnct(0,this.dataArray);
});

并从getPrognoseData（）函数返回promise。

角度异步数据请求，数据数组第一个索引未定义

2 个答案: