Question

我无法访问数组的元素。当我使用：

打印数组时

console.log(MyArray);

我得到了控制台，如图所示。

我从API获得了此数组的数据。我不想在回调中访问它，但最终使用数据在地图上绘制标记。

我被困在这里。

     private MyArray: any[] = [];
     ngOnInit() {
        this.httpservice.getdata().subscribe
        (data=>
        {this.MyArray.push(data);});

     console.log(MyArray[0]);//I am trying to access it here

    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), 
     mapProp);

    var markerarray: any[] = [];



    //I want to eventually access the data here

    for (i = 0; i < 21; i++) {
      markerarray[i] = new google.maps.Marker({
      position: new google.maps.LatLng(MyArray[0][i].latitude, MyArray[i]
     [i].longitude),          //In this line
        title: MyArray[1][i].name,  //and this
        map: map
      });


    }

我的httpservice.ts看起来像：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Response, RequestOptions, Headers } from '@angular/http'

@Injectable()
export class HttpService {

    constructor(private hhtp: Http) { }
    getdata() {
        return this.hhtp.get('url').map((res: Response) => { //the url which I am using
            return res.json();
        })

    }

}

Answer 1

问题是您在订阅方法返回之前尝试访问数组。

像这样修改ngOnInit（）并尝试：

   private MyArray: any[] = [];
   ngOnInit() {
    var mapProp = {
           center: new google.maps.LatLng(51.508742, -0.120850),
           zoom: 10,
           mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), 
                  mapProp);

   var markerarray: any[] = [];
   this.httpservice.getdata().subscribe(
   (data)=>
   {
     this.MyArray.push(data);
     console.log(MyArray[0]);//Access it here

    //I want to eventually access the data here

    for (i = 0; i < 21; i++) {
      markerarray[i] = new google.maps.Marker({
      position: new google.maps.LatLng(MyArray[0][i].latitude, MyArray[i]
     [i].longitude),          //In this line
        title: MyArray[1][i].name,  //and this
        map: map
      });
    }  // end for
   });  // end subscribe
 } // end ngOninit

浏览器控制台会显示完整的数据，因为如果您在图像'i'上看到工具提示，它会说'刚才评估下面的值'。这意味着当您在执行控制台时尝试访问数组中的对象时，其中没有对象值。

Answer 2

您何时尝试访问这些元素？如果您在服务结果出现之前尝试访问，MyArray仍然是空的。

如果您尝试在data之后访问元素，则应该看到它正常工作：

private MyArray: any[] = [];
ngOnInit() {
    this.httpservice.getdata().subscribe
    (data=>
    {
     this.MyArray.push(data);

     console.log(MyArray[0][1].name);
    });
}

如果要访问服务外部方法，则必须确保服务功能已加载数据。

你可以这样等待：

private MyArray: any[] = [];

private IsDataLoaded: boolean = false;

ngOnInit() {
    this.httpservice.getdata().subscribe
    (data=>
    {
     this.MyArray.push(data);
     IsDataLoaded = true;
    });
}

while(true) {
    if(IsDataLoaded) {
        break;
    }
}

// Or this
//while(!IsDataLoaded) {
//    // do nothing but wait
//}

console.log(MyArray[0][1].name);

访问数组内的对象

2 个答案: