json - Angular 2+ - 将 JSON 解析为数字

Question

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

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

ma​​rker.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"
   }
]

ma​​ps.componenet.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());
    }

}

ma​​ps.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>

我正在考虑在 maps.component.ts 文件中使用 parseInt 但我不确定该放在哪里。

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

谢谢!

Answer 1

一种更简洁、更高效的方法是处理一次数据并以不需要任何其他准备的方式将其提供给 View :

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 没有其他 props，...props 可以替换为已知的 id 属性。