Angular如何从REST API响应结果中提取子对象数据

前置检查 #

首先确认你的EmpResponse模型和实际API返回结构匹配：你提到响应中的department是数组类型，而你当前定义的模型里department是单个Department对象，需要先修正模型：

export class EmpResponse {
  department: Department[]; // 把原定义的Department类型调整为Department[]
  employee: Employee; // 你提到响应里employee是对象，可同步把原定义的数组类型去掉
}

方案1：组件内直接提取（无需修改服务） #

直接在employee.component.ts中新增存储部门数组的属性，在接口回调中处理数据即可：

export class EmployeeDetailsComponent implements OnInit 
{
    empResponseList: EmpResponse[];
    departments: Department[] = []; // 新增存储部门数组的属性

    showEmps() {
        this.paymentService.getAllEmps().subscribe((data: EmpResponse[]) => {
               this.empResponseList = data;
               // 提取所有department数组合并为一个一维数组
               this.departments = data.flatMap(resp => resp.department);
               // 如果每个resp的department是单个对象不需要合并，改用map即可：
               // this.departments = data.map(resp => resp.department);
       });
    }
}

方案2：服务层预处理（返回直接可用的部门数组） #

如果不需要保留完整的EmpResponse数据，可以直接在EmployeeService.ts中用RxJS的map操作符预处理数据：

import { map } from 'rxjs/operators'; // 先导入map操作符

// 修改返回类型为Observable<Department[]>
getAllEmps(): Observable<Department[]> 
{
    return this.http.get<EmpResponse[]>(this.baseUrl + `/api/emps`).pipe(
      map(data => data.flatMap(resp => resp.department))
    );
}

组件中直接接收处理好的部门数组即可：

departments: Department[] = [];

showEmps() {
    this.paymentService.getAllEmps().subscribe((depts: Department[]) => {
           this.departments = depts;
   });
}

内容的提问来源于stack exchange，提问作者Shiva Rena