Angular2 - Accessing variables through an event's object

Question

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>

anshuVersatile · Accepted Answer · 2016-12-01 09:04:08Z

1

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


                    });
    }

answered Dec 1, 2016 at 9:04

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

F3L1X79 Over a year ago

I updated my question - beacause I can log your _self object which is correctly set in my event - but if I do update it in there (and I need it): the view still isn't. Is there any way to do this?

F3L1X79 Over a year ago

Well, finally it's strange the view is sometimes update, and sometimes not - When it's not I need to change my select values to see the list updated. if any clues I would be grateful.

F3L1X79 · Accepted Answer · 2016-12-01 14:09:43Z

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!!

Collectives™ on Stack Overflow

Angular2 - Accessing variables through an event's object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related