Angular 4.3.3 HttpClient : レスポンスのヘッダーから値を取得する方法は？

質問

( エディタ: VS Code; タイプスクリプト: 2.2.1 )

目的は、リクエストのレスポンスのヘッダを取得することです。

サービス内のHttpClientでPOSTリクエストを想定する

import {
    Injectable
} from "@angular/core";

import {
    HttpClient,
    HttpHeaders,
} from "@angular/common/http";

@Injectable()
export class MyHttpClientService {
    const url = 'url';

    const body = {
        body: 'the body'
    };

    const headers = 'headers made with HttpHeaders';

    const options = {
        headers: headers,
        observe: "response", // to display the full response
        responseType: "json"
    };

    return this.http.post(sessionUrl, body, options)
        .subscribe(response => {
            console.log(response);
            return response;
        }, err => {
            throw err;
        });
}

HttpClient Angular ドキュメント

最初の問題は、Typescriptのエラーが発生することです。

'Argument of type '{ 
    headers: HttpHeaders; 
    observe: string; 
    responseType: string;
}' is not assignable to parameter of type'{ 
    headers?: HttpHeaders;
    observe?: "body";
    params?: HttpParams; reportProgress?: boolean;
    respons...'.

Types of property 'observe' are incompatible.
Type 'string' is not assignable to type '"body"'.'
at: '51,49' source: 'ts'

確かに、post()メソッドのrefに行くと、このプロトタイプを指しています(I Use VS code)

post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;

しかし、私はこのオーバーロードされたメソッドが欲しいのです。

post(url: string, body: any | null, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpResponse<Object>>;

そこで、このエラーを修正するために、このような構造で試してみました。

  const options = {
            headers: headers,
            "observe?": "response",
            "responseType?": "json",
        };

そして、それはコンパイルされます しかし、私はちょうどjson形式のように本文の要求を取得します。

さらに、なぜフィールドの名前の最後に ?記号を付けなければならないのでしょうか？Typescriptのサイトで見たのですが、このシンボルは、それがオプションであることをユーザーに伝えるだけでよいのでしょうか？

また、すべてのフィールドを、?マークなしと?マークありで使ってみました。

EDIT

で提案された解決策を試してみました。 Angular 4 APIレスポンスからヘッダを取得する . マップソリューションの場合。

this.http.post(url).map(resp => console.log(resp));

Typescript コンパイラは map は Observable の一部ではないので存在しないことを伝えます。

また、次のことも試してみました。

import { Response } from "@angular/http";

this.http.post(url).post((resp: Response) => resp)

コンパイルはできますが、unsupported Media Typeというレスポンスが返ってきます。 これらの解決策は "Http" ではうまくいくはずですが、"HttpClient" ではうまくいきません。

編集 2

私は@Supamiuの解決策でunsupported media typeを得たので、それは私のヘッダのエラーであろう。だから、上記の2番目の解決策（レスポンスタイプ付き）も動作するはずです。しかし、個人的には、"Http" と "HttpClient" を混ぜるのは良い方法だとは思わないので、私はSupamiuのソリューションを維持するつもりです。

どのように解決するのですか？

コンテンツだけでなく、フルレスポンスを観察することができます。これを行うには observe: response を options を関数呼び出しのパラメータに追加します。

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // You can inspect its headers:
    console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.
    console.log(resp.body.someField);
  });

参照 HttpClient のドキュメントを参照してください。