angular - Angular5：带有分页、对象映射的 REST API 服务

Question

我将分页添加到我的 REST API 后端。不，我必须更改我的角度服务。

该 api 现在将返回 jsons，如下所示：

{
    "count": 0,
    "next": null or url,
    "previous": null or url,
    "results": [..]
}

在更改之前，它只是一个对象数组。

这是我目前的服务，当然不再工作了：

list(): Observable<StudentCourse[]> {
  let url = `${this.url}/student_courses/`;
  return this.httpClient.get<StudentCourse[]>(url, { headers: this.headers })
    .pipe(
      catchError(this.handleError('GET student-course', []))
    );
}

如何以最简单的方式将 映射results到对象数组 ( StudentCourse[])？next并将和的 urlprevious直接存储在服务中的变量中以供以后使用。

标签： angulartypescriptangular-services

Answer 1

您可以创建 JSON 响应页面包装器接口：

interface IPageResult<T> {
    count: number,
    next: string | null,
    previous: string | null,
    results: T[]
}

然后用它替换原始数组：

list(): Observable<IPageResult<StudentCourse>> {
  let url = `${this.url}/student_courses/`;
  return this.httpClient.get<IPageResult<StudentCourse>>(url, { headers: this.headers })
    .pipe(
      catchError(this.handleError('GET student-course', []))
    );
}

至于previousandnext值，你可以在任何你喜欢的地方访问它们——在服务中或在消费者中。