Angular 4.3.3 HttpClient: come ottenere valore dall’intestazione di una risposta?

(Editor: VS Code; Typescript: 2.2.1)

Lo scopo è quello di ottenere le intestazioni della risposta della richiesta

Assumere una richiesta POST con HttpClient in un servizio

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 Documentation

Il primo problema è che ho un errore 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' 

    Infatti, quando vado al metodo ref of post (), indico questo prototipo (utilizzo il codice VS)

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

    Ma voglio questo metodo sovraccarico:

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

    Quindi, ho provato a correggere questo errore con questa struttura:

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

    E compila! Ma ho appena ricevuto la richiesta del corpo come in formato json.

    Inoltre, perché devo mettere un? simbolo alla fine di alcuni nomi di campi? Come ho visto sul sito Typescript, questo simbolo dovrebbe solo dire all’utente che è opzionale?

    Ho provato anche a usare tutti i campi, senza e con? votazione

    MODIFICARE

    Ho provato le soluzioni proposte da Angular 4 per ottenere le intestazioni dalla risposta API . Per la soluzione mappa:

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

    Il compilatore di typescript dice che la mappa non esiste perché non fa parte di Observable

    Ho anche provato questo

     import { Response } from "@angular/http"; this.http.post(url).post((resp: Response) => resp) 

    Si compila, ma ottengo una risposta di tipo di supporto non supportata. Queste soluzioni dovrebbero funzionare per “Http” ma non su “HttpClient”.

    MODIFICA 2

    Ottengo anche un tipo di supporto non supportato con la soluzione @Supamiu, quindi sarebbe un errore sulle mie intestazioni. Quindi la seconda soluzione da sopra (con tipo di risposta) dovrebbe funzionare anche. Ma personalmente, non penso che sia un buon modo per mixare “Http” con “HttpClient”, quindi terrò la soluzione di Supamiu

    Puoi osservare la risposta completa invece del solo contenuto:

     http .get('/data.json', {observe: 'response'}) .subscribe(resp => { // Here, resp is of type HttpResponse. // 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); }); 

    Vedi la documentazione di HttpClient

    In effetti, il problema principale era un problema di Typescript.

    Nel codice di post (), le opzioni sono state dichiarate direttamente nei parametri, quindi come un’interfaccia “anonima”.

    La soluzione era di mettere direttamente le opzioni in raw all’interno dei parametri

     http.post("url", body, {headers: headers, observe: "response"}).subscribe... 

    problema principale di typecast in modo che possiamo usare “response” come “body”

    possiamo gestire come

     const options = { headers: headers, observe: "response" as 'body', // to display the full response & as 'body' for type cast responseType: "json" }; return this.http.post(sessionUrl, body, options) .subscribe(response => { console.log(response); return response; }, err => { throw err; });