Ionic 2 cordova-plugin-mauron85-hintergrund-geolocation Keine Aktualisierung der Benutzeroberfläche

Question

Ich bin neu in Ionic und Typescript so Entschuldigung, wenn ich diesen Arsch über Gesicht habe!

Ich versuche, eine einfache iOS- und Android-App mit Ionic 2 zu erstellen, die einfach den aktuellen Standort des Benutzers anzeigt und aktualisiert, während er sich bewegt.

Das Problem, mit dem ich konfrontiert bin, ist, dass, während ich zu erscheinen scheinen, die Koordinaten Standorte durch die UI kommen nie aktualisiert, um den aktualisierten Speicherort anzuzeigen.

Ich habe einen Anbieter mit der cordova-plugin-mauron85-Hintergrund-Geolocation Plugin als location.ts erstellt:

import { Injectable, NgZone} from '@angular/core'; 
import { BackgroundGeolocation } from 'ionic-native'; 

@Injectable() 
export class LocationProvider { 

public message: any = "I'm new here"; 
public latitude:number = 0.0; 
public longitude:number = 0.0; 
private zone: NgZone; 

constructor() { 
    this.initialiseLocationManager(); 
} 

initialiseLocationManager() { 

let config = { 
     desiredAccuracy: 1, 
     stationaryRadius: 1, 
     distanceFilter: 1, 
     interval:1000, 
     activityType:'AutomotiveNavigation', 
     debug: true, 
     stopOnTerminate: true, 
}; 

BackgroundGeolocation.configure(config) 
    .then(this.locationUpdated) 
    .catch((error) => { 
      console.log('BackgroundGeolocation error'); 
     }); 
} 

private locationUpdated(location) { 
    console.log('******* NEW LOCATION ********'); 
    this.zone.run(() => { 
    this.latitude = location.latitude; 
    this.longitude = location.longitude; 
}); 

BackgroundGeolocation.finish(); // FOR IOS ONLY 
} 

private error(error) { 
    console.log('ERROR'); 
} 

public startTracking() { 
    BackgroundGeolocation.start(); 
} 

public stopTracking() { 
    BackgroundGeolocation.stop(); 
} 
} 

ich dann diese in meine Seite test.ts Injektion:

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import {LocationProvider} from '../../providers/location/location'; 

@Component({ 
    templateUrl: 'build/pages/test/test.html', 
}) 
export class TestPage { 

    constructor(private nav: NavController, private  locationProvider:LocationProvider) { 

    } 

    startTracking() { 
    this.locationProvider.startTracking(); 
    } 

    stopTracking() { 
    this.locationProvider.stopTracking(); 
    } 
} 

Meine Seite Inhalt ist dann:

<ion-header> 

    <ion-navbar> 
    <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Test</ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content padding> 
    <button (click)="startTracking()"> 
    Start Tracking 
    </button> 
    <button (click)="stopTracking()"> 
    Stop Tracking 
    </button> 

    <ion-item>Latitude/Longitude</ion-item> 
    <ion-item> 
     {{locationProvider.latitude}},{{locationProvider.longitude}} 
    </ion-item> 
</ion-content> 

Wenn ich meine App für iOS und laufen in Xcode kompilieren es sieht aus, als Ich erwarte, wenn ich die „Start Tracking“ klicken I Einträge in der Xcode-Konsole zu sehen, dass der Standort vorschlagen wird

2016-08-06 12:37:17:370 Test[3264:62403] Better location found: Location: id=0 time=140310177131584 lat=51.8724580445 lon=-2.26443678245263 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 
2016-08-06 12:37:17:371 Test[3264:62403] LocationManager queue Location: id=0 time=140310177131584 lat=51.8724580445 lon=-2.26443678245263 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 
2016-08-06 12:37:18:370 Test[3264:62403] LocationManager didUpdateLocations (operationMode: 1) 
2016-08-06 12:37:18:370 Test[3264:62403] Location age 0.001122 
2016-08-06 12:37:18:370 Test[3264:62403] Better location found: Location: id=0 time=140310177372752 lat=51.8726980292 lon=-2.26504136905789 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 
2016-08-06 12:37:18:370 Test[3264:62403] LocationManager queue Location: id=0 time=140310177372752 lat=51.8726980292 lon=-2.26504136905789 accu=5 aaccu=-1 speed=-1 head=-1 alt=0 type=current 

richtig dh erhalten wird aber die Koordinaten auf der Seite angezeigt nie scheinen zu aktualisieren und zu aktualisieren der wahre Ort.

Ich vermisse wahrscheinlich das Offensichtliche, aber kann es nicht sehen, also würden irgendwelche Vorschläge sehr geschätzt werden.

Answer 1

Sie dieses Problem haben inzwischen gelöst, aber das Problem ist mit dieser Zeile:

BackgroundGeolocation.configure(config) 
.then(this.locationUpdated) <----- 
.catch((error) => { 
     console.log('BackgroundGeolocation error'); 
    }); 
} 

So wird Ihr Rückruf gefeuert werden, aber es wird den Kontext diese verlieren.

Sie müssen den richtigen Kontext dieser senden, von .bind mit()

BackgroundGeolocation.configure(config) 
.then(this.locationUpdated.bind(this)) <----- 
.catch((error) => { 
     console.log('BackgroundGeolocation error'); 
    }); 
}