unable to get component variable value in angular 2 in frontend

Question

Am unable to display mapLoc value in front end... any help?

Here is my component.ts file

export class mycomponent{

 mapLoc:any;

 constructor(){...}

openImageModal(lat,lng){
 this.mapLoc = '';
 var latlng = new google.maps.LatLng(lat, lng);
        var geocoder = geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        console.log(results[1].formatted_address); //able to console
                        this.mapLoc = results[1].formatted_address;
                    }
                }
            });
}

this is mycomponent.html file

<ngui-map zoom="{{zoom}}" center="{{lat}}, {{lng}}" (mapReady$)="onMapReady($event,lat,lng)" (mapClick)="onMapClick($event)" (idle)="onIdle($event)">
                <marker *ngFor="let pos of position" [position]="[pos.lat, pos.lng]" draggable="true" (initialized$)="onMarkerInit($event)"></marker>
                    <info-window id="iw">
                        <div *ngIf="marker.display">
                        {{mapLoc}}
                        </div>
                    </info-window>
            </ngui-map>

sabithpocker · Accepted Answer · 2017-11-14 09:05:50Z

The value of this can be different inside the callback (To check this, try console.log("this", this) inside the callback.). Try using a big arrow function instead to keep reference to your component.

    geocoder.geocode({ 'latLng': latlng }, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    this.mapLoc = results[1].formatted_address;
                }
            }
        });

or cache a reference and use it in the old way:

    let component = this;
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    console.log(results[1].formatted_address); //able to console
                    component.mapLoc = results[1].formatted_address;
                }
            }
        });

Vivek Doshi · Accepted Answer · 2017-11-14 09:12:45Z

0

That is very common issue of scoping :

Just change :

geocoder.geocode({ 'latLng': latlng }, function (results, status) {

to

geocoder.geocode({ 'latLng': latlng }, (results, status) => {

OR

geocoder.geocode({ 'latLng': latlng }, function (results, status) { ... }).bind(this)

For More Detail Ref : https://stackoverflow.com/a/47278161/2349407

answered Nov 14, 2017 at 9:12

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

2 Comments

Vivek Doshi Over a year ago

@Esco, will you please accept and upvote the answer?

Esco Over a year ago

I already tried doing that. I cannot upvote as my points are less than the min required points. However, stackoverflow says it'll be recorded.

Collectives™ on Stack Overflow

unable to get component variable value in angular 2 in frontend

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related