Angular 2+ - 将 JSON 解析为数字

Question

我想使用Angular Google Maps在 Google Maps 上放置一个标记，我的坐标来自 JSON 文件，当在 Angular 中解析它时，它变成了一个字符串。

Angular Google Maps 不支持坐标数字字符串。所以它需要是数字。

标记.json

[  
   {  
      "id":"1",
      "lat":"13.751814",
      "lon":"100.501060"
   },
   {  
      "id":"2",
      "lat":"13.738445",
      "lon":"100.516805"
   },
   {  
      "id":"3",
      "lat":"13.730209",
      "lon":"100.779991"
   }
]

地图.componentnet.ts

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {

    private data;

    constructor(private http:Http){
    }

    ngOnInit(){
      this.getData();
    }

    getData(){
        this.http.get('/localhost/marker.json')
            .subscribe(res => this.data = res.json());
    }

}

地图.component.html

<agm-map [latitude]="13.359665" [longitude]="101.035913" [zoom]="6">
    <ng-container *ngFor="let list of data">
        <agm-marker [latitude]="list.lat" [longitude]="list.lon"></agm-marker>
    </ng-container>
</agm-map>

我试过像这样使用 parseFloat（是的，它不起作用）

<agm-marker [latitude]="parseFloat(list.lat)" [longitude]="parseFloat(list.lon)"></agm-marker>

我正在考虑使用parseInt内部maps.component.ts文件，但我不确定把它放在哪里。

可能有人帮助我或指导我如何解决这个问题。请让我知道我是否提供了足够的信息。

谢谢！

Answer 1

一种更干净、更高效的方法是处理一次数据并以不需要任何其他准备的方式提供它：

getData(){
    this.http.get('/localhost/marker.json')
    .map(res => res.json())
    .map((data: any[]) => data.map(
      ({ lon, lat, ...props }) => ({ lon: +lon, lat: +lat, ...props })
    ))
    .subscribe(data => {
      this.data = data;
    });
}

如果marker.json除了列出的没有其他道具，...props可以用已知id属性替换。