[英]Managing HTTP response in Angular 6
Context of my problem : 我的问题的背景 :
I am trying to create an array of the google maps Longitude and Latitudes to use in a heatmap. 我正在尝试创建要在热图中使用的Google地图经度和纬度数组。 I am able to get data from my localhost and want to be able to reference an array that I create within the subscribe function outside of the function.
我能够从本地主机获取数据,并且希望能够引用我在该函数之外的订阅函数内创建的数组。
When I console.log a all of my data it comes out perfectly. 当我用console.log记录我的所有数据时,它会完美地显示出来。 When I try to reference the this.heatmapData outside of the subscribe function it is empty.
当我尝试在订阅函数之外引用this.heatmapData时,它为空。
Here is the code 下面是代码
this.result = this.examsApi.getExams()
.subscribe(data => {
this.examsList = data;
this.i=0;
var obj = JSON.parse(data);
var val;
this.heatmapData = [];
for (val in obj["index"]) {
console.log(this.heatmapData) // Fills perfectly
this.heatmapData.push(new google.maps.LatLng(obj["Latitude"][val], obj["Longitude"][val])); // The parameters are filled with longitude and latitude values a http.get request in another file.
}
});
console.log(this.heatmapData) // Becomes empty
It does not become empty but it is empty at the moment of logging , you log it into the console, and then you fetch the data - subscribe is async! 它不会变空,但是在登录时它是空的,将其登录到控制台,然后获取数据-订阅是异步的!
Order of execution: 执行顺序:
this.examsApi.getExams()
this.examsApi.getExams()
观察到的this.examsApi.getExams()
console.log(this.heatmapData)
// prints empty array because IT IS EMPTY NOW console.log(this.heatmapData)
//打印空数组,因为现在空了 this.heatmapData
this.heatmapData
I can only assume that you see no update on UI. 我只能假设您在UI上看不到任何更新。 This is because you are pushing to the array - Angular will not detect such change by itself.
这是因为您要推送到数组-Angular本身不会检测到此类更改。 Either you have to invoce change detection run, or better, create new array, but data to it, and replace the array by assigning
this.heatmapData=yourNewArrayOfData
您必须调用更改检测运行,或者更好地,创建新数组,但向其中添加数据,然后通过分配
this.heatmapData=yourNewArrayOfData
替换该数组 this.heatmapData=yourNewArrayOfData
and want to be able to reference an array that I create within the subscribe function outside of the function.
并希望能够引用我在该函数之外的订阅函数中创建的数组。
Looks like I got to the point here - build new array and assign it to this.heatmapData
insteed of pushing. 看起来我到了这里-构建新数组并将其分配给推送的
this.heatmapData
。 Angular will detect that change. Angular将检测到该更改。
Since some people finds this answer "not an answer at all" i must include copy-pasted code I guess. 由于某些人发现此答案“根本不是答案”,因此我猜必须包含复制粘贴的代码。
this.result = this.examsApi.getExams()
.subscribe(data => {
this.examsList = data;
this.i=0;
var obj = JSON.parse(data);
var val;
const newData= [];
for (val in obj["index"]) {
newData.push(new google.maps.LatLng(obj["Latitude"][val], obj["Longitude"][val])); // The parameters are filled with longitude and latitude values a http.get request in another file.
}
this.heatmapData=newData; // this will do the trick
console.log(this.heatmapData); // this will print just fine
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.