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

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

0 голосов
/ 12 марта 2020

Введение

Я работаю над приложением 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.

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

Ответы [ 3 ]

1 голос
/ 12 марта 2020

Проблема в том, что 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 в моем демо).

DEMO: https://stackblitz.com/edit/angular-c8eypx

0 голосов
/ 12 марта 2020

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

  setValues = (values) => {
    this.lat = values?.coords?.latitude
    this.lng = values?.coords?.longitude;
  }
0 голосов
/ 12 марта 2020

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


  constructor() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((values) => { 
        this.lat = values?.coords?.latitude
        this.lng = values?.coords?.longitude;
      });
    }
   }
...