从可观测的角度7中获取数据

Question

我对角很陌生。尝试按以下方式使用来自GET REST端点的数据-

{"employees":[{"empId":"1","name":"emp1","designation":"manager","salary":3000.0},{"empId":"2","name":"emp2","designation":"developer","salary":3000.0}],"addresses":[{"city":"London"},{"city":"Belgium"}]}

它有两份员工名单和地址。在角度上，我创建了如下类-

export class Employee {

  constructor(

  ) { }
}

export class Address {

  constructor(

  ) { }
}



export class EmployeeDetail {
  public employees: Employee[];
  public addresses: Address[];

  constructor( ) { }
  public get employee(): Employee[] {
    return this.employees;
  }

  public get address(): Address[] {
    return this.addresses;
  }

  public set address(addresses: Address[]){
    this.addresses = addresses;
}

}

试图按照以下方式构造EmployeeDetail类-

getData() {
    return this.httpClient.get<EmployeeDetail>('http://localhost:8080/employees')
    .pipe(
      map(data => {
        const employeeList: Employee[] = [];
        const addressList: Address[] = [];
        var employeeDetail = new EmployeeDetail();
        const newList1 : Employee[] = data.employee;
        const newList2 : Address[] = data.address;
        console.log(newList1);
        newList1.forEach(item => 
          employeeList.push(Object.assign(new Employee(), item)));
        newList2.forEach(item => 
          newList.push(Object.assign(new Address(), item)));  
          employeeDetail.employee = employeeList;
          employeeDetail.address = addressList;


        return employeeDetail;
      })
   );

获得以下异常

TypeError: Cannot read property 'forEach' of undefined
    at MapSubscriber.project (http-client.service.ts:119)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

有谁能帮我创建EmployeeDetail对象吗？谢谢

Answer 1

您实际上不需要在getData()方法中加入所有的冗余逻辑。

不如这样简化您的实现：

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

export class Employee {
  empId: string;
  name: string;
  designation: string;
  salary: number;
}

export class Address {
  city: string;
}

export class EmployeeDetail {
  employees: Employee[];
  addresses: Address[];
}

@Injectable()
export class EmployeeService {

  constructor(private http: HttpClient) {}

  getEmployeeData(): Observable < EmployeeDetail > {
    return this.http.get < EmployeeDetail > ('/assets/employees.json');
  }

}

我们只需将get方法的get方法在HttpClient上指定为EmployeeDetail，并返回该方法返回的任何内容。这将返回一个包装类型为EmployeeDetail的值的EmployeeDetail。

这是一个供您参考的工作样本StackBlitz。