Question

我可以将员工转储到控制台并查看地址，但无法推送到数组，因为Angular说它看不到地址。

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

@Injectable()
export class StarmarkEmployeeService {

    private addresses: any = [];

    constructor(private http: HttpClient) { }

    getEmployees() {
        this.http.get('...').subscribe((employee) => {
            console.log(employee); // Works
            this.addresses.push(employee.address); // Doesn't
        });
    }

}

端点是以下数组：

{
    "id": 0,
    "firstName": "Dejuan",
    "lastName": "Hessel",
    "dob": "1971-12-12T23:21:55.027Z",
    "address": {
        "street": "36948 Daugherty Crescent",
        "city": "North Baileeborough",
        "state": "LA",
        "zip": "57539-9128"
    },
    "phone": "812-157-1264",
    "username": "Dejuan_Hessel39",
    "password": "Adc_4PxXBjC6FTf",
    "email": "Dejuan62@hotmail.com",
    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kennyadr/128.jpg",
    "tags": []
}

所以我修改了get()以返回HTTP响应并尝试直接获取地址。

getEmployees() {
    return this.http.get('...', 
        { observe: 'response' })
        .subscribe((resp) => {
        console.log(resp);
    });
}

更新：

export class StarmarkDirectoryComponent implements OnInit {

  public addresses: any = [];

  constructor(employeeService: StarmarkEmployeeService) {
    employeeService.getEmployees();
    this.addresses = employeeService.addresses;
  }

  ngOnInit() {
  }

}

所以这是最终实施：

getEmployees() {
    this.http.get<Employee[]>('...')
        .pipe(
            map(employees => {
                const directory = [];
                employees.forEach(employee => {
                    directory.push({
                        firstName: employee.firstName,
                        lastName: employee.lastName,
                        phone: employee.phone,
                        email: employee.email,
                        city: employee.address.city,
                        avatar: employee.avatar
                    });
                });
                return directory;
            }),
            toArray()
        )
        .subscribe(employees => {
            console.log(employees);
        });
}

Answer 1

您的问题是您正在处理服务响应，就像它返回单个对象而不是数组一样。这就是为什么在TypeScript中使用类型非常重要，就像输入响应一样，它可以帮助您解决这个问题。

您需要这样做：

this.http.get<Employee[]>(...).subscribe(employees => {
    employees.forEach(employee => {
        this.addresses.push(employee.address);
    });
});

<强>更新

根据您在下面的评论，您需要使用可观察量的map(...)运算符。

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

import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/map'; //<-- Need to import observable map operator

import { Employee, Address } from './starmark-employee.model';

@Injectable()
export class StarmarkEmployeeService {
    constructor(private http: HttpClient) { }

    getEmployees(): Observable<Address[]> {
        return this.http.get<Employee[]>('http://challenge-dev.starmarkcloud.com/users')
            .map(employees => {
                // You can map your response from an Employee[] to
                // whatever you want. In this case it is mapping to
                // an Address[]. Point is, you do whatever processing
                // on the Employee[] and return the modified response
                return employees.map(employee => employee.address);
            });
    }
}

Answer 2

必须直接访问回复。不确定为什么Angular5无法解析嵌套的JSON，但这会起作用。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Employee} from './employee';

@Injectable()
export class StarmarkEmployeeService {

    private addresses: any = [];

    constructor(private http: HttpClient) { }

   getEmployees() {
        return this.http.get(
        'http://challenge-dev.starmarkcloud.com/users',{
            observe: 'response'
        })
        .subscribe((resp) => {
        for (let b = 0; b < (<any>resp.body).length; b++) {
           console.log(resp.body[b].address);
        }
    });
}

}

Angular 5：无法访问嵌套的JSON

2 个答案: