元组的 Angular HTTP 可观察对象答案

【问题标题】：Angular HTTP observable of tuple元组的 Angular HTTP 可观察对象
【发布时间】：2018-06-19 19:32:38
【问题描述】：

在我的服务中，我有getTasks() 方法：

getTasks(): Observable<TaskDto[]> {
  let url = `/tasks/gettasks`;
  return this.http
    .get(url)
    .subscribe(res => res);
}

这很好，但现在我想读取响应标头并将其值与有效负载一起返回。因此，该方法应该返回可观察的元组，而不是 Observable<TaskDto[]>：Observable<[TaskDto[],Number]>

getTasks(): Observable<[TaskDto[],Number]> {
  let url = `/tasks/gettasks`;
  return this.http
    .get<TaskDto[]>(url, {observe: 'response'})
    .subscribe(res => {
      let payload:TaskDto[] = res.body;
      let page:Number = Number(res.headers.get('X-Pagination'));
      let output = [payload, page];
    });
}

我能够读取标头值，但是如何从 getTasks() 返回 Observable<[TaskDto[],Number] ？

【问题讨论】：

标签： ajax angular observable

【解决方案1】：

您应该在您的getTasks 方法中使用map 将您的http 响应映射到您真正想要返回的元组中。像这样的：

getTasks(): Observable<[TaskDto[],Number]> {
  let url = `/tasks/gettasks`;
  return this.http
    .get<TaskDto[]>(url, {observe: 'response'})
    .pipe(map(res => {
      let payload:TaskDto[] = res.body;
      let page:Number = Number(res.headers.get('X-Pagination'));
      let output: [TaskDto[],Number] = [payload, page];
      return output;
    }));
}

然后从调用组件订阅这个方法。

【讨论】：