Angular 5：REST API 带有分页和对象映射的服务

Question

我向我的 REST API 后端添加了分页。不，我必须更改我的 angular 服务。

api 现在 return json 如下所示：

{
    "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 和 previous 的 url 直接存储在服务中的变量中以备后用。

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

至于 previous 和 next 值，您可以随心所欲地访问它们 - 在服务中或在消费者中。

Angular 5：REST API 带有分页和对象映射的服务

Angular5: REST API Service with pagnation, mapping of the objects

typescript

angular-services

angular