地圖不是函數 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());
}

無論您使用哪種方法，都只是品味問題。 當您處理進入系統的外部數據時，這兩種方法都不是類型安全的。