Angular 2+ - 将 JSON 解析为数字

Question

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

Angular 谷歌地图不支持坐标数字的字符串。所以它需要是数字。

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

Angular 模板中不允许使用像 parseFloat 这样的全局函数（请参阅 the Angular documentation）。

您可以使用+ 运算符将字符串转换为数字：

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

或者在你的组件中定义一个方法：

convertCoordinate(str: string): number {
  return parseFloat(str);
}

并在模板中调用它：

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

Answer 2

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

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属性。

Answer 3

+lat 在 Angular 模板中不起作用，它是无效的语法并且会抛出错误，以及 parseFloat 或 parseInt，在这里您可以像 @estus 指出的那样解析请求中的 JSON 或者您可以将字符串相乘1：

<agm-marker [latitude]="list.lat * 1" [longitude]="list.lon * 1"></agm-marker>

这会将字符串转换为数字，但请注意，如果它不是数字，则会出现错误并且您将无法捕获它。