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