地理位置：错误类型错误：无法设置属性“纬度”为空答案

【问题标题】：Geolocation: ERROR TypeError: Cannot set property 'lat' of null地理位置：错误类型错误：无法设置属性“纬度”为空
【发布时间】：2020-06-24 16:56:56
【问题描述】：

简介

我正在开发一个 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的第一行抛出错误

getCurrentPosition 返回的 JSON 对象的（相关部分）

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

我尝试了什么

JSON 很受欢迎，我可以打印它，也可以打印它的子对象。我什至可以将它绑定到 setValues 方法中的局部变量。我还尝试将该局部变量绑定到属性，但这导致了同样的错误。
将lat: any 更改为lat: number 或在其前面添加public。
摆脱 setValues 方法中的空运算符。
将代码放入 ngOnInit 方法中。

所有这些尝试都导致了相同的错误。

【问题讨论】：

标签： angular typescript geolocation typeerror angular9

【解决方案1】：

问题在于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

【讨论】：

【解决方案2】：

你可以让你的函数匿名：

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

【讨论】：

【解决方案3】：

我不是 100% 确定问题出在哪里，但它与范围有关，并且通过创建匿名回调函数似乎可以正常工作。


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

【讨论】：