时间戳

首页 > 解决方案 > Angular 7：如何正确地从嵌套响应中获取 this.http.get？

angular - Angular 7：如何正确地从嵌套响应中获取 this.http.get？

问题描述

我正在做Angular 7教程，想知道如果它们不在顶层但嵌套，如何正确请求项目列表：

顶级（作品）

[
  { id: 123, name: 'Name 123'},
  { id: 124, name: 'Name 124'},
  // ...
]

嵌套（不起作用）

{
  message: 'x items found.',
  data: [
    { id: 123, name: 'Name 123'},
    { id: 124, name: 'Name 124'},
    // ...
  ]
}

服务

// ...
@Injectable({ providedIn: 'root' })
export class ItemService {
  private apiUrl = 'api/items'; // items are in .data

  constructor(private http: HttpClient) {}

  getItems (): Observable<Item[]> {      
    // Here is the problem:
    return this.http.get<Item[]>(this.apiUrl, {
      pathToItems: 'data' // <- Pseudocode
    });
  }
}

零件

// ...
this.itemService.getItems()
  .subscribe(items => this.items = items);

我可以subscribe()在服务中使用并返回 的内容.data，但我认为应该有一个更简单的解决方案。我需要保留返回类型（数组Item）。

任何想法？

提前致谢！

标签： angulartypescriptrxjs

解决方案

您可以使用 RxJs 过滤器，例如map或filter。这是使用 RxJs（Observables）时的优势之一。您可以在将数据传递给组件之前对其进行过滤。

一个例子：

return this.http.get(ITEMS_URL).pipe(
  filter(response => response.filter(data => data.message === "SUCCEEDED")),
  map(response => response.map(data => data.items))
);

推荐阅读