Угловой 2+ - разбирать JSON как число

Question

Я хочу разместить маркер на Картах Google, используя Angular Google Maps мои координаты взяты из файла JSON, который при анализе в Angular становится строкой.

Angular Google Maps не поддерживает строку для числа координат. Так должно быть число.

marker.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 файла, но я не уверен, куда его поместить.

Пусть кто-нибудь поможет мне или подскажет, как решить эту проблему. И, пожалуйста, дайте мне знать, предоставляю ли я достаточно информации.

Спасибо!

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.

Answer 2

+ lat не будет работать в шаблоне Angular, это неверный синтаксис и вызовет ошибку, а также parseFloat или parseInt, здесь вы можете проанализировать JSON в запросе, как указано @estus ИЛИ вы можете умножить строку на 1:

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

Это преобразует строку в число, но имейте в виду, что если это НЕ число, будет ошибка, и вы не сможете ее перехватить.

Answer 3

Глобальные функции, такие как parseFloat, не допускаются в шаблонах Angular (см. Документация Angular ).

Вы можете преобразовать строки в числа с помощью оператора +:

<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>