У меня проблемы с доступом к элементам массива. Когда я печатаю массив с помощью:
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();
})
}
}
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', она скажет: 'Значения ниже оцениваются только сейчас'. Это означает, что когда вы пытались получить доступ к объекту в массиве во время работы с консолью, в нем не было значения объекта.
Когда вы пытаетесь получить доступ к элементам? Если вы попытаетесь получить доступ до того, как придет результат от службы, 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);