地图不是函数rxjs angular

debugcn 发表于 Dev

bleau83

我是RXJS的新手，正在努力使以下代码正常工作。在角度，我正在调用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

库尔特·汉密尔顿

您的模拟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导航更加清晰。另外，您应该返回DataPackagefrom的数组getPackages。

另类

您可以pluck在管道中使用运算符，以确保将数组放入mapRxJS运算符。

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());
}

无论您使用哪种方法，仅取决于您的口味。这两种方法都不是类型安全的，因为您要处理进入系统的外部数据。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。