enter image description here

У меня проблемы с доступом к элементам массива. Когда я печатаю массив с помощью:

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

    }

}
0
mistletoe 24 Апр 2017 в 15:44

2 ответа

Лучший ответ

Проблема в том, что вы пытаетесь получить доступ к массиву до того, как метод подписки вернется.

Измените 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', она скажет: 'Значения ниже оцениваются только сейчас'. Это означает, что когда вы пытались получить доступ к объекту в массиве во время работы с консолью, в нем не было значения объекта.

1
Amit Chigadani 24 Апр 2017 в 14:32

Когда вы пытаетесь получить доступ к элементам? Если вы попытаетесь получить доступ до того, как придет результат от службы, 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);
-1
er-han 24 Апр 2017 в 14:00