web-dev-qa-db-fra.com

Le type 'Subscription' n'est pas assignable au type 'Observable <SearchResult []>' 'Angular 5 utilisant HttpClient au lieu de Http

J'essaie d'utiliser la nouvelle classe HttpClient à la place de l'ancien Http.

Je veux mapper sur les données que je reçois de la méthode subscribe, mais obtenir l'erreur ci-dessous Des suggestions sur pourquoi je reçois ceci?

Code:

export class YoutubeSearchService {
  constructor(
    private http: HttpClient,
    @Inject(YOUTUBE_API_KEY) private apiKey: string,
    @Inject(YOUTUBE_API_URL) private apiUrl: string,
  ) { }

  search(query: string): Observable<SearchResult[]> {
    const params: string = [
      `q=${query}`,
      `key=${this.apiKey}`,
      `part=snippet`,
      `type=video`,
      `maxResults=10`,
    ].join("&");
    const queryUrl = `${this.apiUrl}?${params}`;
    return this.http.get(queryUrl).subscribe(data => {
      data.map(item => {
        return new SearchResult({
          id: item.id.videoId,
          title: item.snippet.title,
          description: item.snippet.description,
          thumbnailUrl: item.snippet.thumbnails.high.url,
        });
      });
    });
  }
}

Erreur:

ERROR in src/app/services/youtube-search.service.ts(26,5): error TS2322: Type 'Subscription' is not assignable to type 'Observable<SearchResult[]>'.
  Property '_isScalar' is missing in type 'Subscription'.
src/app/services/youtube-search.service.ts(27,12): error TS2339: Property 'map' doesnot exist on type 'Object'.
angularobservable
9
Isak La Fleur

Votre méthode search renvoie une subscription mais la signature affirme qu'elle doit renvoyer un Observable<SearchResult[]>

Pour résoudre ce problème, changez la signature de votre méthode ou changez subscribe en map

10
Venomy

Pour renvoyer l'observable, utilisez:

return this.http.get(queryUrl);

et faites l'abonnement du côté appelant. Si vous avez besoin de mapper votre objet de retour de l'appel Http vers un autre objet. Ensuite, une solution serait de définir un sujet et dans votre abonnement, vous effectuerez une opération suivante sur ce sujet.

En ce qui concerne la deuxième erreur, vous obtenez pour utiliser la fonction de carte. Vous pouvez utiliser Return this.http.get (queryUrl); Pour que le compilateur l’affiche sous forme de tableau au lieu d’un objet unique. Je ne suis pas sûr que ce soit ce que vous vouliez réaliser ou non.

0
Sameh Awad

facilement, vous ne l'utilisez pas pour la valeur de retour.

.valueChanges()
0
Omar