javascript - 如何解决TrackingPage.html :24 ERROR TypeError: Cannot read property 'unsubscribe' of undefined?

Question

我正在尝试使用 Ionic 和 Cordova Geolocation 插件构建位置跟踪应用程序。然而，当点击 stopLocationWatch() 按钮时，我得到了这个错误:

TrackingPage.html:24 错误类型错误:无法读取未定义的属性“取消订阅”

有人知道如何解决这个问题吗？

tracking.page.ts

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

import { GeolocationService } from '../../app/geolocation.service';
import { UserService } from '../../app/user.service';

@Component({
  selector: 'app-tracking',
  templateUrl: './tracking.page.html',
  styleUrls: ['./tracking.page.scss'],
})
export class TrackingPage implements OnInit {
  geoLatitude: number;
  geoLongitude: number;
  geoAccuracy: number;
  timeStamp: string;
  uId = this.userService.getUserId();

  watchLocationUpdates: any;
  isWatching: boolean;

  constructor(
    private geolocation: Geolocation,
    public geolocationService: GeolocationService,
    public userService: UserService) {
     }

  ngOnInit() {
    document.addEventListener('deviceready', onDeviceReady, false);
    function onDeviceReady() {
        console.log('navigator.geolocation works well');
    }
  }

  // Start location update watch
  watchLocation() {
    const options = {
      maximumAge: 3600000,
      timeout: 5000,
      enableHighAccuracy: true,
    };
    this.isWatching = true;
    this.watchLocationUpdates = this.geolocation.watchPosition(options);
    this.watchLocationUpdates.subscribe((resp) => {
      this.geoLatitude = resp.coords.latitude;
      this.geoLongitude = resp.coords.longitude;
      this.geoAccuracy = resp.coords.accuracy;
      this.timeStamp = resp.timestamp;
      console.table('watchLocation function called', {
        latitude: this.geoLatitude,
        longitude: this.geoLongitude,
        accuracy: this.geoAccuracy,
        timeStamp: this.timeStamp,
        uId: this.uId
        });
      this.geolocationService.insertUserGeolocation({
        latitude: this.geoLatitude,
        longitude: this.geoLongitude,
        accuracy: this.geoAccuracy,
        timeStamp: this.timeStamp,
        uId: this.uId
        })
        .subscribe((response) => {
          localStorage.setItem('lastLocation', JSON.stringify({
            latitude: this.geoLatitude,
            longitude: this.geoLongitude,
            accuracy: this.geoAccuracy,
            timeStamp: this.timeStamp,
            uId: this.uId
            }));
          console.log(`user location data inserted in FB`, {
            latitude: this.geoLatitude,
            longitude: this.geoLongitude,
            accuracy: this.geoAccuracy,
            timeStamp: this.timeStamp,
            uId: this.uId
            });
        });
      });
  }

  // Stop location update watch
  stopLocationWatch() {
    this.isWatching = false;
    console.log('this.isWatching = ', this.isWatching);
    this.watchLocationUpdates.unsubscribe();
  }
}

tracking.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      <div class="titleicon">
        <div class="logo-img"><img src="../assets/logo.png" width="120px" /></div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" style="text-align: center;">
  <div>

    <h4>Latitude: {{ geoLatitude }}</h4>
    <h4>Longitude: {{ geoLongitude }}</h4>
    <p>Genauigkeit: {{ geoAccuracy }} m</p>

  </div>

  <ion-button (click)="watchLocation()">
    Route starten
  </ion-button>
  <br>
  <ion-button (click)="stopLocationWatch()" color="danger">
    Route beenden
  </ion-button>

</ion-content>

Answer 1

这里的问题是，您正试图取消订阅一个可观察对象。

我们只能退订一个可观察对象的订阅。

下面的代码可以解决你的问题，

import { Subscription } from "rxjs";

watchLocationUpdatesSub: Subscription; // Add this property to the ts class

// Update your watch location method as,
...
this.watchLocationUpdates = this.geolocation.watchPosition(options);
this.watchLocationUpdatesSub = this.watchLocationUpdates.subscribe((resp) => {
   ...
   // entire subscribe code block as above
   ...
}

stopLocationWatch() {
   this.isWatching = false;
   console.log('this.isWatching = ', this.isWatching);
   this.watchLocationUpdatesSub.unsubscribe(); // a change here as well
}