Angular 可观察的回报<；类型>；从嵌套的REST响应

我刚刚开始研究角度，这是我第一次研究可观测物体。我已经通过了官方网站上的《英雄之旅》教程，希望将其翻译成我的应用程序

教程中的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', []))
    );
}

但我的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）（不带）的响应，然后提取“results”部分并返回可观察的

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', []))
    );
 }

getHeroes（）：可观察{
返回this.http.get（this.heroesUrl）
.烟斗(
轻触（=>this.log（'fetched heros'）），
地图（数据=>{
设val=data.results；
返回val；
}),
catchError（this.handleError（'getHeroes'，[]））
);
}

将服务文件中的

可观察的

更改为

可观察的

，并将订户更改为

数据：数组；
getHeroes（）.订阅（res=>{
此数据=结果；
});

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', []))
    );
 }