Геолокация: ОШИБКА TypeError: Невозможно установить для свойства 'lat' значение null

Введение

Я работаю над приложением Angular, где хочу получить текущую позицию пользователя и сохранить долготу и высоту в двух свойствах lng и lat, но это, похоже, не работает, и что бы я ни пытался; Я продолжаю получать ошибку ERROR TypeError: Cannot set property 'lat' of null

Код TypeScript (соответствующая часть)

  lat : any;
  lng : any;

  constructor() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.setValues);
    }
   }

  setValues(values) {
    this.lat = values?.coords?.latitude
    this.lng = values?.coords?.longitude;
  }

Ошибка выдается в первой строке setValues

Объект (соответствующая часть) JSON, возвращаемый функцией getCurrentPosition

{
  coords:
  {
    latitude: 27.380583,
    longitude: 33.631839
  }
}

Что я пробовал

  • JSON хорошо принят, и я могу распечатать его, а также его подобъекты. Я даже могу привязать его к локальной переменной в методе setValues. Я также попытался привязать эту локальную переменную к свойствам, но это вызвало ту же ошибку.
  • Замена lat: any на lat: number или добавление public перед ним.
  • Избавление от нулевых операторов в методе setValues.
  • Размещение кода в методе ngOnInit.

Все эти попытки вызвали одну и ту же ошибку.


typescript angular geolocation typeerror angular9
person Ruben Szekér    schedule 12.03.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Проблема в том, что this относится к разным областям. Это относится только к внешней области (в данном случае к компоненту), когда вы используете функцию стрелки. В противном случае this относится к самой функции.

Вы можете сами увидеть это в действии, настроив следующий тест:

ngOnInit() {

  // 1. delegate function
  this.getValues(this.setValues);

  // 2. function() { }
  this.getValues(function(values) {
    console.log(this);
  });

  // 3. arrow function
  this.getValues(values => this.setValues(values));
}

getValues(callback: (values) => void) {
  callback({
    lat: 1,
    long: 2
  });
}

setValues(values) {
  console.log(this);
}

Это показывает 3 разных способа передачи функции в качестве обратного вызова. 1. и 2. выведут undefined на консоль. 3. будет регистрировать содержащий класс (AppComponent в моей демонстрации).

ДЕМО: https://stackblitz.com/edit/angular-c8eypx

person Kurt Hamilton    schedule 12.03.2020

arrow_upward
0
arrow_downward

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


  constructor() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((values) => { 
        this.lat = values?.coords?.latitude
        this.lng = values?.coords?.longitude;
      });
    }
   }
person Ruben Szekér    schedule 12.03.2020

arrow_upward
0
arrow_downward

Вы можете сделать свою функцию анонимной:

  setValues = (values) => {
    this.lat = values?.coords?.latitude
    this.lng = values?.coords?.longitude;
  }
person Roberto Zvjerković    schedule 12.03.2020