Angular

Question

我收到此错误消息..

Error: Invalid LatLng object: (undefined, undefined)

所以我已经尝试 console.log “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"
    }
  ]
}

Answer 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 这样的输入：虽然短期内速度更快，而且不必为丢失的类型而烦恼，但从长远来看它会帮助你运行（这里通常它可以为您节省所有调试时间）。

您可以通过 copy-pasting 您 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 接口。

一些例子：

Angular - Leaflet Error: Invalid LatLng object: (undefined, undefined)

Angular - Leaflet Error: Invalid LatLng object: (undefined, undefined)

leaflet

typescript