Angular2: потеря доступа к наблюдаемому

Question

У меня есть приложение с ионным/угловым2. Существует карта google, которая загружается в представление. У меня есть наблюдаемый вызванный markers, который является массивом объектов маркера google maps. Я подталкиваю их к массиву, чтобы заставить их появиться на карте. Затем я добавляю слушателей событий ко всем маркерам. Щелчок функциональен, однако я теряю доступ к this.markers. Почему это происходит? Возможно, лучший вопрос заключается в том, как создать прозрачную переменную, доступную во всем классе?

Вот мой код:

export class MapView 
{ 
    markers: any; 

    ngOnInit() 
    { 
    //initialization for map and the raw marker array data not shown 
    this.addListeners() 
    } 

    addListeners() //functions properly (this.markers is accessible) 
    { 
    console.log(this.markers) //displays the markers array properly 
    for(var i = 0; i < this.markers.length; i++) 
    { 
     this.markers[i].addListener("click",this.markerClicked, this); 
    } 
    } 

    markerClicked(marker) //the clicked marker is passed 
    { 
    console.log(this.markers); 
    //here is the problem. The console says that the markers array is empty 
    //when called from this function 
    } 
} 

Answer 1

Выглядит как это не потому, что, когда ваш обратный вызов this.markerClicked называется, он больше не связан с классом, поэтому this.markers больше не доступно.

Я вижу два варианта:

1) инлайн ваш обратный вызов и объявить его с помощью функции со стрелкой (стрелками функции сохранения контекста this)

this.markers[i].addListener("click", (marker) => { 
    // do something with marker and this.markers 
    console.log(this.markers); 
}, this); 

2) Кажется немного хаком, но .. Вы пытались привязать свой callback к классу?

Что-то вроде this.markerClicked.bind(this) вместо this.markerClicked.