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

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 = [phone];
//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 请求......对于两者，我基本上都在创建一些文档{名称：...系列：[]} 以适应基于 HTTP 数据的 NGX 图表数据格式。并将它们推入数组数据数组...

Answer 1

这个问题是，在调用this.showFnct(0,this.dataArray);之前，您不会等待getPrognoseData()返回其数据

您可以从getPrognoseData()返回Observable并在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。