java - Angular - 从 Spring 接收 JSON

Question

不幸的是，我没有达到预期的效果。我希望设备自动映射到基于 JSON 的对象。怎么了？我是否必须创建足以在 Spring 工作的 Angular 物体(相同的田地等)？我希望能够在 .html 中显示这些数据。

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

说实话，我不知道你想做什么。假设你想写一些像

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