CODEWITHSUNDEEP
angular
F3L1X79
F3L1X79

Reputation: 2675

Angular2 - Accessing variables through an event's object

I'm stuck at accessing variables through an event's object. Is there something I can refactor in this code, because I need to display some annotations in my templateUrl after I set them in an event click of the map. Here is the code:

  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: on app.component.html:

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

Upvotes: 1

Views: 284

Answers (2)

F3L1X79
F3L1X79

Reputation: 2675

Finally after struggling the whole day, here's what I had to add (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
                    });
    }

Thanks to @anshuVersatile - If somebody find something better, please let us know!!

Upvotes: 0

anshuVersatile
anshuVersatile

Reputation: 2068

I use to do following for this particular problem but if any precise solution is available plz let me know 

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


                    });
    }

Upvotes: 1

Related Questions