angular - angular 11 处理 http 响应

Question

猜猜这可能是基本的，但我是一个完整的角度和可观察的初学者。尝试遵循 Angular 官方 Heroes 教程，该教程最终使用内存中的 api 模拟真实服务器；我将我的示例与真正的后端挂钩，但不确定如何正确处理从服务器返回的数据。

我有一个HeroService，有一个方法可以获得所有英雄。我正在使用 Angular HttpClient，并且通过设计，我的服务器返回一个带有results属性的对象，该属性本身就是一个数组。如何将results响应中的属性转换为Observableof Hero[]？顺便说一句，属性中的每个元素都具有与定义的接口results相同的形状。Hero

getHeroes(): Observable<Hero[]> {
    var res: Hero[] = []
    return this.http.get("https://my_heroes_url", this.httpOptions)
            .pipe(x => x['results'] as Hero[]);
    
  }

标签： angularrxjsobservable

Answer 1

使用mapRxJS 运算符：

import { map } from 'rxjs/operators';

getHeroes(): Observable<Hero[]> {
  return this.http.get("https://my_heroes_url", this.httpOptions)
            .pipe(map(x => x['results'] as Hero[]));
}

有关 RxJS 操作符的更多信息，请考虑查看RxJS 操作符手册。