在Angular 6中管理HTTP响应

Question

我的问题的背景 ：

我正在尝试创建要在热图中使用的Google地图经度和纬度数组。 我能够从本地主机获取数据，并且希望能够引用我在该函数之外的订阅函数内创建的数组。

当我用console.log记录我的所有数据时，它会完美地显示出来。 当我尝试在订阅函数之外引用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

Answer 1

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

执行顺序：

1. 创建可由this.examsApi.getExams()观察到的this.examsApi.getExams()
2. 通过订阅将其加热-AJAX请求已开始
3. console.log(this.heatmapData) //打印空数组，因为现在空了
4. IO延迟
5. AJAX完成-响应来了，调用了调用回调-您将数据推送到this.heatmapData

我只能假设您在UI上看不到任何更新。 这是因为您要推送到数组-Angular本身不会检测到此类更改。 您必须调用更改检测运行，或者更好地，创建新数组，但向其中添加数据，然后通过分配this.heatmapData=yourNewArrayOfData 替换该数组 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
            });