从 Angular 7 中的 Observable 获取数据答案

【问题标题】：Get data from Observable in Angular 7从 Angular 7 中的 Observable 获取数据
【发布时间】：2019-10-15 00:58:37
【问题描述】：

我对 Angular 还很陌生。尝试从 GET REST Endpoint 使用如下数据-

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

它有两个列表员工和地址。在 Angular 中，我创建了如下类-

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 对象。谢谢

【问题讨论】：

这是data.employees 而不是data.employee。
和 data.addresses 不是 data.address
请在发布问题之前使用调试器。添加一个简单的debugger; 并查看正在发生的事情将对您将来有很大帮助。
@Maryannah 是的，但如果我们能让更多人使用debugger;，这里的问题质量就会提高。 ;)
@Reactgular 不能再同意了！ But template debugging is coming 所以我们做到了，这很好:)

标签： angular typescript rxjs observable angular7

【解决方案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');
  }

}

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

这是一个 Working Sample StackBlitz 供您参考。

【讨论】：