<Type> 从嵌套的 REST 响应返回可观察的

Question

我刚刚开始使用Angular，这是我第一次使用Observable。我已经浏览了官方网站上的英雄之旅教程，想把它翻译成我的应用程序。

教程中的hero.service.ts具有以下功能：

/** GET heroes from the server */
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
tap(_ => this.log('fetched heroes')),
catchError(this.handleError<Hero[]>('getHeroes', []))
);
}

当JSON响应看起来像这样时，我可以让它工作：

[
{
"id": 1,
"user": "admin",
"date": "2020-12-03T12:25:11Z",
"name": "Test"
},
{
"id": 2,
"user": "admin",
"date": "2020-12-03T13:34:01Z",
"name": "Test2"
}
]

但是我的REST API返回以下内容：

{
"count": 6,
"next": "http://127.0.0.1:8000/api/heroes?page=2",
"previous": null,
"results": [
{
"id": 1,
"user": "admin",
"date": "2020-12-03T12:25:11Z",
"name": "Test"
},
{
"id": 2,
"user": "admin",
"date": "2020-12-03T13:34:01Z",
"name": "Test2"
}
]
}

因此，我的问题是，如何转换响应以从嵌套的结果字段中提取数据？

我想我必须保存来自this.http.get(this.heroesUrl(的响应(不带<Hero[]>(，然后提取"结果"部分并返回可观察到的？

Answer 1

getHeroes().subscribe(res=>{

let data = res.results;
});

或者你可以使用RxJs地图

getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
tap(_ => this.log('fetched heroes')),
map( data=>{
let val = data.results;
return val;
}),
catchError(this.handleError<Hero[]>('getHeroes', []))
);
}

Answer 2

将服务文件中的Observable<Hero[]>更改为Observable<HttpResponse<Hero[]>>，并将订阅者更改为

data: Array<Hero>;
getHeroes().subscribe(res=>{
this.data = res.results;
});