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

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

执行顺序：

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

我只能假设您在UI上看不到任何更新。这是因为您要推送到数组-Angular本身不会检测到此类更改。您要么需要进行变更检测运行，要么更好的方法是创建一个新数组，但要添加数据，然后通过分配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
            });

在Angular 6中管理HTTP响应

1 个答案: