Erreur de type non attrapée : Impossible de définir la valeur de la propriété null

Question

Cannot set property 'currentLat' of null ; J'ai essayé de déclarer toutes les variables globalement pour pouvoir les utiliser plus tard mais je ne sais pas pourquoi je continue à obtenir des nullités lorsque j'appelle une variable et que j'essaie de définir ses propriétés.

currentLat: any;
 currentLng: any;

  ngOnInit() {
        this.watchPosition();
      }

 watchPosition() {
        var options = {
            maximumAge: 3600000,
            timeout: 3000,
            enableHighAccuracy: true,
        }
        var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
        function onSuccess(position) {
            this.currentLat=position.coords.latitude;
            this.currentLng=position.coords.longitude ;
        };

        function onError(error) {
            alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
        }
    }

Answer 1

this n'est pas disponible dans votre fonction imbriquée. Vous pouvez lier this comme onSuccess.bind(this); à la fonction ou d'affecter facilement this à une autre variable.

watchPosition() {
  const that = this;
  const options = {
    maximumAge: 3600000,
    timeout: 3000,
    enableHighAccuracy: true,
  };

  const watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
  function onSuccess(position) {
    that.currentLat = position.coords.latitude;
    that.currentLng = position.coords.longitude ;
  }

  function onError(error) {
    alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
  }
}

Answer 2

Utilisez les fonctions fléchées pour accéder à "cette" variable :

onSuccess = (position) => {
    this.currentLat=position.coords.latitude;
    this.currentLng=position.coords.longitude ;
}

Answer 3

La valeur de this est nulle puisque vous l'utilisez à l'intérieur de la fonction. Vous pourriez utiliser fonctions de la flèche à la place.

 watchPosition() {
        var options = {
            maximumAge: 3600000,
            timeout: 3000,
            enableHighAccuracy: true,
        }
        var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
        onSuccess = (position) => {
            this.currentLat=position.coords.latitude;
            this.currentLng=position.coords.longitude ;
        };

        onError = (error) => {
            alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
        }
    }