Nativescript Angular: cannot read property of undefined

I have the following code with a binding to latitude and longitude. I want my Geolocation Tracker to update the values. But watchPosition doesn't see this.latitude and this.longitude.

@Component({
  selector: "my-app",
  templateUrl: "app.component.html",
})
export class AppComponent {

latitude: number;
longitude: number;
watchId = 0;

constructor() {
    this.latitude = 0;
    this.longitude = 0;
}

public startTracking() {

    /* Get Location */
    this.watchId = geolocation.watchLocation(function (loc) {
            if (loc) {
                console.log("Current location is: " + loc.latitude + ", " + loc.longitude);
                this.latitude = loc.latitude;
                this.longitude = loc.longitude;
            }
        }, function (e) {
            console.log("Error: " + e.message);
        },
        {desiredAccuracy: enums.Accuracy.any, updateDistance: 10, minimumUpdateTime: 1000});
}

public stopTracking() {
    if (this.watchId) {
        geolocation.clearWatch(this.watchId);
    }
}

}

This is the error I get:

com.tns.NativeScriptException: 
Calling js method onLocationChanged failed

TypeError: Cannot set property 'latitude' of undefined
File: "/data/data/org.nativescript.elektra/files/app/app.component.js, line: 44, column: 30

StackTrace: 
Frame: function:'', file:'/data/data/org.nativescript.elektra/files/app/app.component.js', line: 44, column: 31
Frame: function:'android.location.LocationListener.onLocationChanged', file:'/data/data/org.nativescript.elektra/files/app/tns_modules/nativescript-geolocation/nativescript-geolocation.js', line: 25, column: 17


at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:726)
at com.tns.Runtime.callJSMethod(Runtime.java:712)
at com.tns.Runtime.callJSMethod(Runtime.java:693)
at com.tns.Runtime.callJSMethod(Runtime.java:683)
at com.tns.gen.android.location.LocationListener.onLocationChanged(LocationListener.java:11)
at android.location.LocationManager$ListenerTransport._handleMessage(LocationManager.java:255)
at android.location.LocationManager$ListenerTransport.access$000(LocationManager.java:184)
at android.location.LocationManager$ListenerTransport$1.handleMessage(LocationManager.java:200)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:176)
at android.app.ActivityThread.main(ActivityThread.java:5419)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:525)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1046)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:862)
at dalvik.system.NativeStart.main(Native Method)


ANSWERS:


It's because this is invisible in the anonymous function. You have to store the reference of this before you start the anonymous function.

public startTracking() {
let self = this;
/* Get Location */
this.watchId = geolocation.watchLocation(function (loc) {
        if (loc) {
            console.log("Current location is: " + loc.latitude + ", " + loc.longitude);
            self.latitude = loc.latitude;
            self.longitude = loc.longitude;
        }
    }, function (e) {
        console.log("Error: " + e.message);
    },
    {desiredAccuracy: enums.Accuracy.any, updateDistance: 10, minimumUpdateTime: 1000});
}


 MORE:


 ? Nativescript Angular: cannot read property of undefined
 ? Nativescript Angular: cannot read property of undefined
 ? Inability to use hexagonal or round submit buttons in nativescript for android
 ? Inability to use hexagonal or round submit buttons in nativescript for android
 ? Inability to use hexagonal or round submit buttons in nativescript for android
 ? Elongated hexagon shaped button using only one element
 ? Weird NativeScript Angular 2 data Binding issue
 ? Weird NativeScript Angular 2 data Binding issue
 ? Weird NativeScript Angular 2 data Binding issue
 ? NativeScript + Angular2 analytics