Angular2 - Доступ к переменным через объект события

Question

Я застрял в доступе к переменным через объект события. Есть ли что-то, что я могу реорганизовать в этом коде, потому что мне нужно отобразить некоторые аннотации в моем шаблонеUrl после того, как я установил их в клике на карте. Вот код:

import { Component, OnInit, AfterViewInit } from '@angular/core'; 

    declare var ol: any; 

    @Component({ 
     selector: 'my-map-app', 
     templateUrl: 'app.component.html' 
    }) 
    export class AppComponent implements OnInit, AfterViewInit { 

     static draw: any; 
     annotations: any[]; 

     constructor() { 
      this.annotations = []; 
     } 

     ngOnInit(): void { 

        // ADD MAP 
        AppComponent.map = new ol.Map({ 
         target: 'map', 
         layers: layers, 
         view: new ol.View({ 
          center: ol.proj.fromLonLat([10, 10]), 
          zoom: 2 
         }) 
        }); 

        // Action when clicking on a Point (no edition mode) 
        AppComponent.map.on('singleclick', function(evt) { 
         // here I want to access and set the array of annotations 
         //this.annotations or AppComponent.annotations is not available 

        }); 
    } 

Edit: на app.component.html:

<select > 
    <option *ngFor="let annotation of annotations">{{annotation.name}}</option> 
</select> 

Answer 1

я использую, чтобы сделать следующее для этой конкретной проблемы, но если точное решение доступно плз дайте мне знать

    ngOnInit(): void { 
        let _self:any = this; 
        AppComponent.map = new ol.Map({ 
         target: 'map', 
         layers: layers, 
         view: new ol.View({ 
          center: ol.proj.fromLonLat([10, 10]), 
          zoom: 2 
         }) 
        }); 

        // Action when clicking on a Point (no edition mode) 
        AppComponent.map.on('singleclick', function(evt) { 
         console.log("this = ",_self); 


        }); 
    } 

Answer 2

Наконец после того, как изо всех сил на целый день, вот что я должен был добавить (ChangeDetectorRef):

import { Component, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core'; 

    declare var ol: any; 

    @Component({ 
     selector: 'my-map-app', 
     templateUrl: 'app.component.html' 
    }) 
    export class AppComponent implements OnInit, AfterViewInit { 

     static draw: any; 
     static reload: any; 
     annotations: any[]; 

     constructor(private changeDetectorRef: ChangeDetectorRef) { 
      AppComponent.reload = changeDetectorRef; 
      this.annotations = []; 
     } 

     ngOnInit(): void { 
        let _self: any = this; //from @anshuVersatile 

        // ADD MAP 
        AppComponent.map = new ol.Map({ 
         target: 'map', 
         layers: layers, 
         view: new ol.View({ 
          center: ol.proj.fromLonLat([10, 10]), 
          zoom: 2 
         }) 
        }); 

        AppComponent.map.on('singleclick', function(evt) { 
         self.annotations = ['foo', 'bar']; 
         AppComponent.reload.detectChanges(); //this is what i had to trigger 
        }); 
    } 

Благодаря @anshuVersatile - Если кто-то найдет что-то лучшее, сообщите нам об этом !!