Angular - 传单错误：无效的 LatLng 对象：（未定义，未定义）答案

【问题标题】：Angular - Leaflet Error: Invalid LatLng object: (undefined, undefined)Angular - 传单错误：无效的 LatLng 对象：（未定义，未定义）
【发布时间】：2022-02-23 10:03:27
【问题描述】：

我收到此错误消息..

错误：无效的 LatLng 对象：（未定义，未定义）

所以我已经尝试控制台记录“lon”和“lat”变量以查看是否输出了实际值，但控制台中的输出只是显示“未定义”.. 所以我猜有问题在我如何定位这些值时，由于该传单获得了 2 个未定义的对象并给了我该错误消息。有人可以帮我正确定位对象吗？

我创建地图标记的服务如下所示

export class CustomersService {
  customers: string = '../../assets/data/customerdata.json';

  constructor(private http: HttpClient) {}

  makeCustomerMarkers(map: L.Map): void {
    this.http.get(this.customers).subscribe((res: any) => {
      for (const c of res.customerArray) {
        const lon: number = c?.customerAdress?.geoCoord?.longitudeCoord;
        const lat: number = c?.customerAdress?.geoCoord?.latitudeCoord;
        const marker = L.marker([lat, lon]);

        marker.addTo(map);
      }
    });
  }
}

这是我调用服务的组件

ngAfterViewInit(): void {
    this.initMap();
    this.customersService.makeCustomerMarkers(this.map);
  }

这是我的数据

{
  "customerArray": [
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "test@trashmail.de",
      "homepage": "www.google.de"
    },
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "test@trashmail.de",
      "homepage": "www.google.de"
    },
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "test@trashmail.de",
      "homepage": "www.google.de"
    }
  ]
}

【问题讨论】：

标签： angular typescript leaflet

【解决方案1】：

似乎是由一个简单的拼写错误引起的：您的代码中有customerAdress，但您的JSON数据中有customerAddress（注意2x d）。

我鼓励您输入您的数据，它肯定会帮助您避免此类微不足道的错误：

interface Customer {
  customerAddress: {
    geoCoord: {
      longitudeCoord: number;
      latitudeCoord: number;
    }
    // etc.
  }
  // etc.
}

interface ResultCustomers {
  customerArray: Customer[];
}

this.http.get("url").subscribe((res: ResultCustomers) => {
  for (const c of res.customerArray) {
    // Now `c` is recognized as a `Customer`
    // and TypeScript can detect typos
    c?.customerAdress; // Error
  }
});

作为一般规则，尽可能避免输入any：虽然它在短期内更快，不必担心缺少类型，但从长远来看，它会帮助你（这里通常可以节省你所有的调试时间）。

您可以通过在 TS 文件中复制粘贴该数据的样本并尝试输入来验证您的 JSON 数据是否确实与您的接口匹配（以防您在那里打错了...）：

const dataSample: ResultCustomers = {
  "customerArray": [
    {
      "customerAddress": {
        "country": "Deutschland",
        "geoCoord": {
          "longitudeCoord": 10.4477,
          "latitudeCoord": 51.1634
        }
      },
      "phone": "0145221551",
      "eMail": "test@trashmail.de",
      "homepage": "www.google.de"
    },
  ]
};

如果您需要输入大量此类 JSON 数据，有一些工具可以帮助您自动转换为 TypeScript 接口。

一些例子：

【讨论】：