如何使用 HttpClient 访问响应标头？ [复制]答案

【问题标题】：How to access the response headers using HttpClient? [duplicate]如何使用 HttpClient 访问响应标头？ [复制]
【发布时间】：2018-06-11 14:12:24
【问题描述】：

我正在尝试从 get 请求中获取 X-Total-Count 值。

在我的 meal.service.ts 中，我使用这个函数来调用服务。

import { Injectable }              from '@angular/core';
import { Observable }              from 'rxjs/Observable';
import { catchError, map, tap }    from 'rxjs/operators';
import { of }                      from 'rxjs/observable/of';
import { HttpClient, HttpHeaders,
         HttpParams,
         HttpResponse }            from '@angular/common/http';

getMeals (page:number): Observable<Meal[]> {
    let httpParams = new HttpParams().set('where', '%')
      .set('orderBy', 'meal_name')
      .set('page', page.toString())
      .set('items', '10');
    return this.http.get<Meal[]>(this.mealUrl, { params: httpParams  })
      .pipe(
        tap(meals => { this.log(`fetched entries`); console.log(meals.headers)  }),
// meals.headers is undefined
        catchError(this.handleError<Meal[]>('getMeals'))
      );
  };

我得到错误：

src/app/meal.service.ts(52,71) 中的错误：错误 TS2339：“Meal[]”类型上不存在属性“标题”。

在 this.meals 中，我只看到来自 typ Meal 的数据集，但没有标题。

在我的 foods.component.ts 中，我正在使用这项服务：

  getMeals(page:number): void {
    this.mealService.getMeals(this.page)
      .subscribe(data => {
        this.count = data.headers.get('X-Total-Count'), // didn't work
        this.meals = data
      })
  }

从请求中获取标头的正确方法是什么？

我将代码更改为：

  getMeals (page:number): Observable<any> {
    let httpParams = new HttpParams().set('where', '%')
      .set('orderBy', 'meal_name')
      .set('page', page.toString())
      .set('items', '10');
    return this.http.get<any>(this.mealUrl, { params: httpParams, observe: 'response'} )
      .pipe(
        catchError(this.handleError<any>('getMeals'))
      );
  };

之后我有了正文和标题。

【问题讨论】：

angular.io/guide/http#reading-the-full-response
@JBNizet 新年快乐！

标签： angular http-headers angular-httpclient

【解决方案1】：

我不得不将 Observable 更改为 Observaable 并添加观察：'response'。

  getMeals (page:number): Observable<any> {
    let httpParams = new HttpParams().set('where', '%')
      .set('orderBy', 'meal_name')
      .set('page', page.toString())
      .set('items', '10');
    //this.messageService.add('Debug: ' + httpParams);
    return this.http.get(this.mealUrl, { params: httpParams, observe: 'response'} )
      .pipe(
        //tap(meals => { console.log(meals.headers)  }),
        catchError(this.handleError<any>('getMeals'))
      );
  };

感谢您提供文档链接。

【讨论】：