在Angular 6中管理HTTP响应

我的问题背景：

我正在尝试创建一个谷歌地图经度和纬度数组，用于热图。我能够从本地主机获取数据，并希望能够引用在函数外部的subscribe函数中创建的数组

当我在console.log中记录我所有的数据时，它会完美地显示出来。当我尝试在subscribe函数之外引用this.heatmapData时，它是空的

这是密码

    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

---

它不会变为空，但在登录时它是空的，您将其登录到控制台，然后获取数据-订阅是异步的

执行顺序：

通过

this.examsApi.getexames（）创建冷可观察

通过订阅它来加热它-AJAX请求启动

console.log（this.heatmapData）

//打印空数组，因为它现在是空的

IO延迟

AJAX完成-响应来了，订阅回调被调用-您将数据推送到

this.heatmapData

我只能假设您在UI上看不到任何更新。这是因为您正在推动阵列-Angular本身不会检测到这种变化。您必须运行invoce change detection（更改检测），或者更好地创建新阵列，但向其添加数据，并通过分配

this来替换阵列。heatmapData=yourNewArrayOfData

希望能够引用我在 在函数外部订阅函数

看来我说到点子上了-构建新数组并将其分配给this.heatmapData，而不是推送。Angular将检测到这种变化

因为有些人发现这个答案“根本不是答案”，我想我必须包括复制粘贴的代码

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

---

解释这里发生的是所有OPs问题的解决方案——不仅是这个问题，而且是他将来调试异步代码时将面临的任何类似问题。谢谢Antonios。这帮助我实现了这个概念。您不能在subscribe函数之外全球化或公开任何“this.”变量的可能副本