Angular 4.3.3 HttpClient：如何從響應的頭部獲取值？

Question

（編者：VS代碼;打字稿：2.2.1）

的目的是獲得請求

的響應的報頭中一個服務

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的POST請求

HttpClient Angular Documentation

的第一個問題是，我有一個打字稿錯誤：

'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' 

事實上，當我去）後的裁判（方法，我點上這個原型（我使用VS代碼）

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網站上看​​到的，這個符號應該告訴用戶它是可選的嗎？

我也嘗試使用所有的字段，沒有和？標誌着

編輯

我試圖通過Angular 4 get headers from API response提出的解決方案。對於地圖解決方案：

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

打字稿編譯器會告訴地圖不存在，因爲它不是可觀察

部分我也試過這個

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

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

它編譯，但我得到一個不受支持的媒體類型響應。 這些解決方案應該適用於「Http」，但它不適用於「HttpClient」。

EDIT 2

我得到也與@Supamiu解決方案不支持的媒體類型，所以這將是對我的頭一個錯誤。所以從上面的第二個解決方案（與響應類型）應該也可以。但是personnaly，我不認爲它是混合「HTTP」了一個好辦法「HttpClient的」，所以我會繼續Supamiu

的解決方案

Answer 1

您可以觀察到完整的響應，而不是唯一的內容：

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's documentation