map不是函数rxjs angular
map不是函数rxjs angular
提问于 2020-02-29 00:24:18
我是RXJS的新手，我正在努力让下面的代码正常工作。在angular中，我调用了一个REST API，而rest 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回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-29 00:28:07
您的模拟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());
}无论你使用哪种方法，都是一个品味问题。这两种方法都不是类型安全的，因为您正在处理进入系统的外部数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60455694
复制相关文章
相似问题
腾讯云开发者
