Ionic 2 cordova-plugin-mauron85-background-geolocation Не обновляющий UI

Question

Я новичок в Ionic и Typcript, так что извиняюсь, если у меня есть эта задница о лице!

Im пытается создать простое приложение для iOS и Android с Ionic 2, которое просто отображает текущее местоположение пользователей, обновляющееся по мере их перемещения.

Проблема, с которой я сталкиваюсь, заключается в том, что пока я, кажется, получаю координаты, входящие в пользовательский интерфейс, никогда не обновляется, чтобы отображать обновленное местоположение.

я создал поставщика, используя Cordova-плагин-mauron85-фон-геолокации плагин как location.ts:

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

Я тогда инъекционного это в моей странице test.ts:

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

моего содержимого страницы затем:

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

Когда я компилирую мое приложение для прошивки и запустить в Xcode это выглядит Я ожидаю, когда я нажимаю кнопку «Start Tracking» Я вижу записи в консоли Xcode, которые предлагают место в настоящее время получены правильно, т.е.

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 

Но координаты, отображаемые на странице никогда не кажется, чтобы освежить и обновить истинное местоположение.

Возможно, я пропустил очевидное, но не вижу его, поэтому любые предложения были бы весьма признательны.

Answer 1

Вы, возможно, решить эту проблему сейчас, но проблема с этой линии:

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

Таким образом, ваш обратный вызов уволят, но он потеряет контекст это.

Вы должны послать правильный контекст этого, с помощью .bind()

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