javascript - 将响应映射到可变 Angular 5

Question

我正在使用 HttpClient 调用 get 请求，该请求返回以下格式的响应。

{
    "organizations": [
        {
            "id": 1,
            "name": "Team Red",
            "address": null,
            "sites": [
                {
                    "organization": 1,
                    "name": "Site A",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 1,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 1,
                    "name": "Site B",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 2,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 1,
                    "name": "Site C",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 3,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                }
            ]
        },
        {
            "id": 2,
            "name": "Team Blue",
            "address": null,
            "sites": [
                {
                    "organization": 2,
                    "name": "Site X",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 4,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 2,
                    "name": "Site Y",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 5,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                },
                {
                    "organization": 2,
                    "name": "Site Z",
                    "address": null,
                    "lat": null,
                    "lon": null,
                    "id": 6,
                    "createdAt": "2017-10-23T11:07:11.000Z",
                    "updatedAt": "2017-10-23T11:07:11.000Z"
                }
            ]
        }
    ]
}

我需要直接将响应映射到组织变量。我附上了服务文件代码，以及组织和站点文件。我得到的错误是在 response.json() 上，我搜索过这个函数不可用。任何帮助将不胜感激。

import {Site} from "./Site";

export class Organization {
  id: number;
  name: string;
  address: string;
  sites: Site[];

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}


---------


export class Site {
  organization: number;
  name: string;
  address: string;
  lat: string;
  lon: number;
  id: number;
  createdAt: string;
  updatedAt: number;
}

---- API Service ----

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Organization} from "../models/Organization";
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';


const API_URL = "http://localhost:1337/api";

@Injectable()
export class ApiService {

  constructor(private http: HttpClient) {

  }

  public getOrganizationWithSites(): Observable<Organization[]> {

const headers = new HttpHeaders()
  .set("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTEsIm5hbWUiOiJBdGlmIiwiaWF0IjoxNTIwMjY2NDQwLCJleHAiOjE1MjAzNTI4NDB9.GW5P7zDow4PcI9RaB3pn6KxPn929pmzPCnce6n8OCo8");
let organizations: any;
var options = {
  headers: headers
};

return this.http
      .get<Organization[]>(API_URL + '/user/organizations', options);

  }

      // private handleError(error: Response | any) {
      //   console.error('ApiService::handleError', error);
      //   return Observable.throw(error);
      // }
}



// Components Code

ngOnInit() {

    this.apiService
      .getOrganizationWithSites()
      .subscribe((data) => {
        this.organizations = data;

      });
    console.log(this.organizations);
}

Answer 1

根据 HttpClient angular 5 从 ApiService 中的 response.json(); 中删除 json 部分不需要这样做。 HttpClient 隐式执行。

更多信息 Angular 5