地图不是函数 rxjs angular

Question

我是 RXJS 的新手，我正在努力使以下代码正常工作。 在 angular 中，我正在调用 REST API，其余 API 返回一个数组。 我只需要模型中 API 的某些数据。 我正在尝试使用 RXJS 来做到这一点（所以没有 forEach，...），这就是我到目前为止所拥有的：

import { Injectable, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataPackage } from './models/data-package';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PackageService implements OnInit{

  constructor(private http: HttpClient) { }

  getPackages(): Observable<DataPackage> {
    return this.http
    .get<any>('http://dummy.restapiexample.com/api/v1/employees')
    .pipe(
      map((data: any[]) =>
        data.map(
          (response: any) =>
            new DataPackage(response.employee_name, response.employee_salary, response.employee_age, new Date())
        )
      )
    );
  }

  ngOnInit() {      

  }
}

我收到以下错误

ERROR TypeError: "data.map is not a function"
    getPackages package.service.ts:19

Answer 1

您的模拟 API 正在以这种结构返回响应：

{
  "status": "success",
  "data": [
    { /.../ }
  ]
}

所以你试图在这个对象上调用.map 。 相反，您希望导航到data属性。 有几种方法可以做到这一点，但我会保持简单。

getPackages(): Observable<DataPackage[]> {
  return this.http
    .get<any>('http://dummy.restapiexample.com/api/v1/employees')
    .pipe(
      map((response: any) => response.data // <--- navigate to "data"
        .map((item: any) => this.mapResponseItem(item))            
    );
}

private mapResponseItem(item): DataPackage {
  return new DataPackage(response.employee_name, 
    response.employee_salary, response.employee_age, new Date());
}

编辑：我将内部地图移出订阅，希望使我添加的.data导航更清晰一点。 此外，您应该从getPackages返回一个DataPackage数组。

选择

您可以使用pluck运营商在管道这样确保阵列进入你的map RxJS运营商。

getPackages(): Observable<DataPackage[]> {
  return this.http
    .get<any>('http://dummy.restapiexample.com/api/v1/employees')
    .pipe(
      pluck('data'), // <-- pass "data" on to map
      map((data: any) => data.map(item => this.mapResponseItem(item))            
    );
}

private mapResponseItem(item): DataPackage {
  return new DataPackage(response.employee_name, 
    response.employee_salary, response.employee_age, new Date());
}

无论您使用哪种方法，都只是品味问题。 当您处理进入系统的外部数据时，这两种方法都不是类型安全的。