时间戳

首页 > 解决方案 > Angular 2+ - 将 JSON 解析为数字

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

问题描述

我想使用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"
   }
]

maps.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());
    }

}

maps.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文件，但我不确定该放在哪里。

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

谢谢！

标签： jsonangulartypescript

解决方案

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

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可以替换为known idproperty。

推荐阅读