Angular - 从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);
  }
}

和

谷歌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;
    });
  }

}

谷歌maps.component.html

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

Answer 1

真的，我不知道你想做什么。你想要的Supouse写一些像

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

那就是，为每个设备创建一个标记（因为纬度位于对象设备的属性actualLocation的属性gps_latitude中，您必须使用device.actualLocation.gps_latitude）

Answer 2

我有一个5.27 Angular版本。我读过，不必使用.map（res =＆gt; res.json（））因为角度新的http自动从JSON转换为对象。不幸的是，如果我添加map（res =＆gt; res.json（））并导入HttpClient，我的对象设备就不会映射。

Answer 3

我在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);
  }
}