Angular - получение JSON от Spring

Question

К сожалению, у меня нет ожидаемого эффекта. Я хотел бы, чтобы устройства автоматически отображались на объект на основе JSON. Что случилось? Нужно ли создавать угловые объекты, подходящие тем, кто работает весной (те же поля и т. Д.)? Я хочу отображать эти данные в формате .html.

GET http://localhost:8080/devices дает:

   [
  {
    "id": 1,
    "connectionName": "Pracownik1",
    "deviceName": "Samsung J5",
    "historyDays": 7,
    "startConnection": "2018-04-28",
    "actualLocation": {
      "id": 1,
      "date": "2018-04-28",
      "time": "13:00:00",
      "gps_longitude": "22,157",
      "gps_latitude": "57,15"
    },
    "historyLocations": [],
    "owner": {
      "id": 1,
      "login": "admin",
      "password": "admin"
    }
  },
  {
    "id": 2,
    "connectionName": "Pracownik2",
    "deviceName": "Samsung galaxy S7",
    "historyDays": 7,
    "startConnection": "2018-04-28",
    "actualLocation": {
      "id": 2,
      "date": "2018-04-28",
      "time": "14:00:00",
      "gps_longitude": "22,187",
      "gps_latitude": "58,156"
    },
    "historyLocations": [],
    "owner": {
      "id": 1,
      "login": "admin",
      "password": "admin"
    }
  }
]

И у меня есть:

device.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DeviceService {

  constructor(private http: HttpClient) { }

  devicesURL = 'http://localhost:8080/devices';

  public getDevicesForUser() {
    return  this.http.get(this.devicesURL);
  }
}

и

Google-maps.component.ts

import { Component, OnInit } from '@angular/core';
import { DeviceService} from '../device.service';
import 'rxjs/add/operator/map';

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

  devices: any;

  lat: number = 52.2158186;
  lng: number = 20.9987672;

  constructor(private deviceService: DeviceService) { }

  ngOnInit() {
    this.deviceService.getDevicesForUser().
    subscribe(data => {
      this.devices = data;
    });
  }

}

Google-maps.component.html

<agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>

Answer 1

У меня 5,27 угловая версия. Я читал, что не нужно использовать .map (res => res.json ()), потому что угловое новое http автоматическое преобразование из JSON в объект. К сожалению, если я добавлю map (res => res.json ()) и импортирую HttpClient, мои объектные устройства не отобразятся.

Answer 2

Я делаю нечто подобное в Angular 5. Вы можете сделать это, как показано ниже:

код

device.ts

export interface Device {
  id: number;
  connectionName: string;
  etc .....
}

device.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Device } from './device'

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DeviceService {

  constructor(private http: HttpClient) { }

  devicesURL = 'http://localhost:8080/devices';

  public getDevicesForUser: Array<Device> () {
    return  this.http.get<Array<Device>>(this.devicesURL);
  }
}

Answer 3

Действительно, я понятия не имею, что ты хочешь делать. Если вы хотите написать что-то вроде

<agm-marker *ngFor="let device of devices" 
     [latitude]="device.actualLocation.gps_latitude" 
     [longitude]="device.actualLocation.gps_longitude">
</agm-marker

То есть создайте отметку для каждого вашего устройства (поскольку широта находится в свойстве gps_latitude свойства actualLocation вашего объектного устройства, вы должны использовать device.actualLocation.gps_latitude)