Ionic 2 cordova-plugin-mauron85-background-geolocation Не обновлять пользовательский интерфейс

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

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

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

Я создал провайдера, использующего плагин cordova-plugin-mauron85-background-geolocation как 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>

Когда я компилирую мое приложение для iOS и запускаю его в Xcode, он выглядит так, как я ожидаю, когда я нажимаю кнопку "Отслеживание запуска", я вижу записи в консоли 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

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

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

Ответ 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');
  });
}