web-dev-qa-db-fra.com

Retour de HttpClient angulaire dans l'attente d'un <HttpEvent <any> observable plutôt que d'un <any>

J'obtiens une erreur de compilation sur le type de retour lorsque j'utilise HttpClient. Dans ma fonction GetPortfolio, je m'attends à ce que l'appel GET renvoie l'objet json de type Observable<Portfolio>, mais donne l'erreur suivante:

Le type Observable<HttpEvent<Portfolio>> n'est pas assignable au type Observable<Portfolio>. Le type HttpEvent<Portfolio> n'est pas assignable au type Portfolio. Le type HttpProgressEvent n'est pas assignable au type Portfolio. La propriété name est manquante dans le type HttpProgressEvent.

Mon code:

import { Injectable } from '@angular/core';
import { environment } from './environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';


export interface Portfolio {
  name: string;
  id: string;
}

@Injectable()
export class PortfolioService {

    private httpOptions;

    apiUrl: string;

    constructor(private http: HttpClient) {
      this.apiUrl = environment.apiUrl + "/api/portfolios";

      this.httpOptions = {
        headers: new HttpHeaders(
          {
            'Content-Type': 'application/json',
          })   
      };
    }


    GetPortfolio(portfolioId: string): Observable<Portfolio> {
      return this.http.get<Portfolio>(this.apiUrl + '/${portfolioId}', this.httpOptions);
   }

}

Dans le didacticiel et les documents relatifs au héros angulaire, les demandes HttpClient doivent s’attendre à Observable<any>: Hdp HclpClient doc

Alors, est-ce que je fais quelque chose de mal? Ou devrais-je définir la valeur de retour sur Observable<HttpEvent<Portfolio>>?

angularangular-httpclient
9
roverred

C'est étrange, ne donne pas d'erreur si tu écris

GetPortfolio(portfolioId: string): Observable<Portfolio> {
    return this.http.get<Portfolio>('....', {
        headers: new HttpHeaders(
            {
                'Content-Type': 'application/json',
            })   
    });
}

Le compilateur attend un objet avec les en-têtes, les paramètres, l'observe, etc.

même vous pouvez faire

headers: HttpHeaders = new HttpHeaders({
        'Content-Type': 'application/json',
    })
GetPortfolio(portfolioId: string): Observable<Portfolio> {
        return this.http.get<Portfolio>('...', {
            headers: this.headers
        })
    }
5
Eliseo

Typecast vos httpOptions

private httpOptions: {
    headers: HttpHeaders
};

Le compilateur TypeScript extrait le type de méthode get incorrect ( src )

/**
* Construct a GET request which interprets the body as JSON and returns the full event stream.
*
* @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
*/
get<T>(url: string, options: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe: 'events',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'json',
    withCredentials?: boolean,
}): Observable<HttpEvent<T>>;

Lorsque vous spécifiez le type avec des en-têtes, le type correct est extrait. ( src )

/**
* Construct a GET request which interprets the body as JSON and returns it.
*
* @return an `Observable` of the body as type `T`.
*/
get<T>(url: string, options?: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'json',
    withCredentials?: boolean,
}): Observable<T>;
19
LLai

je résous ce casting mon en-tête params comme ça

return this.http.get<SomeModel>(someUrl, <Object>this.options);
0
koutat cruzado

Comme il s’agit d’un service 'PortfolioService', nous n’avons peut-être pas besoin d’interface ici, mais nous pouvons utiliser le type quelconque, et la méthode GET n’est nécessaire que ici.

GetPortfolio(portfolioId): Observable<any> {
  return this.http.get(this.apiUrl + '/${portfolioId}')
         .map((response:any) => {
              return response;
         });
}

Cela devrait fonctionner, s'il vous plaît essayez.

0
nithalqb