Как получить доступ к заголовкам ответа с помощью HttpClient?

Я пытаюсь получить значение X-Total-Count из запроса на получение.

В моем файле food.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: свойство «заголовки» не существует для типа «Еда []».

В this.meals я вижу только наборы данных из типа Meal, но не заголовки.

В моей таре.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'))
      );
  };

После этого у меня есть тело и заголовки.


person Sven    schedule 01.01.2018    source источник
comment
https://angular.io/guide/http#reading-the-full-response   -  person JB Nizet    schedule 01.01.2018
comment
@JBNizet С Новым годом!   -  person Sajeetharan    schedule 01.01.2018


Ответы (1)


Мне пришлось изменить Observable на Observaable и добавить наблюдение: «ответ».

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

Спасибо за ссылку на документацию.

person Sven    schedule 01.01.2018