无法从 angular 4 中的 http get 方法获取对象属性

Question

我有两个类定义如下，

export class Cycle {
    lock_id: number;
    bicycle_id: number;
    qr_code: number;
    latitude: number;
    longitude: number;
    status: number;
    battery_level: number;
    is_locked: number;
    is_active: boolean;
    last_date_updated_on: Date;
    last_location_updated_on: Date;

    constructor () {

    }
}

And another class is,

import { Cycle } from './Cycle';
export class ParkingLocation {
    parking_id: number;
    latitude: number;
    longitude: number;
    parking_radius: number;
    max_cycle_limit: number;
    cycles: Cycle[];
    available_parking_space: number;
    available_cycles: number;
    address: string;
    area_id: number;

    constructor () {}
}

我从 http get 方法中获取了一个 JSON 对象，调用如下，

return this.http.get(this.serverUrl + this.getParkingAreaUrl + '?parkingArea=' + this.myWebLocation.id, httpOptions)
        .subscribe( (data: ParkingLocation[]) => {
          // console.log(data);
          this.location = data;
           console.log(this.location);
          for ( let obj of this.location) {
            console.log(obj.parking_id);
            console.log(obj.address);
            console.log(obj.latitude);
            console.log(obj.cycles);
          }
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side error occured.');
            } else {
              console.log('Server-side error occured.');
              console.log( err );
            }
          }
        );
}

这是方法的 JSON 输出，

[
    {
        "parkingId": 1,
        "latitude": 12.958042,
        "longitude": 77.716313,
        "parkingRadius": 1,
        "maxCycleLimit": 5,
        "cycles": [
            {
                "lockId": "123654789123655",
                "bicycleId": 0,
                "latitude": 12.955596,
                "longitude": 77.714446,
                "status": 3,
                "batteryLevel": 500,
                "parking": {
                    "parkingId": 1,
                    "latitude": 12.958042,
                    "longitude": 77.716313,
                    "parkingRadius": 1,
                    "maxCycleLimit": 5,
                    "cycles": null,
                    "avilableParkingSpace": 0,
                    "availableCycles": 0,
                    "address": "HyperCity Market"
                },
                "qrCode": "1123",
                "lastDataUpdatedOn": null,
                "lastLocationUpdatedOn": null,
                "active": true,
                "locked": false
            }
        ],
        "avilableParkingSpace": 0,
        "availableCycles": 0,
        "address": "HyperCity Market",
        "areaId": 1
    }
]

但是当我运行应用程序时，在调用 http 方法时编写的控制台语句给出了输出

Undefined

对于像 parking_id 这样的属性，循环，但为其他 2 个属性（即地址和纬度）给出了正确的输出。请纠正我错误的地方，JSON 输出是否正确映射到位置对象？如果不是，我哪里出错了，请建议我阅读一些文章以解决问题。注意：我无法理解 .map(),.subscribe() 函数将对 angular4 中的 http.get() 方法做什么。

Answer 1

你现在正在做的，不是用

创建你的实例 class

.subscribe( (data: ParkingLocation[]) => {

您只是在说您期望的回应与您的class 相符。您需要将您的回复明确映射到您的 class。有几种方法可以做到这一点。你可以手写..

// assuming you are using HttpClient:
.map(response => response.map(x => new ParkingLocation(x.parkingId /** ....**/))

但是创建某种序列化程序或创建 class 构造函数会更容易。这里有一些想法：How do I cast a JSON object to a typescript class and .

无法从 angular 4 中的 http get 方法获取对象属性

Unable to get object properties from http get method in angular 4

json

angular

angular-httpclient