Abrufen von Objektdaten von einem Dienst in Angular 2

Question

Ich versuche, Daten von meiner Service-Funktion abzurufen, aber es treten Probleme auf. Mein LandingPage-Komponentencode, der unten angezeigt wird, sendet einen Tastendruck an meine Servicefunktion, die ein Objekt zurückgibt, das mit Daten voll ist.

Aber ich kann das Service-Objekt nicht zu meiner LandingPage zurückkehren. Hier ist, wie ich meinen Dienst erstellen:

task.service.ts

addKey(keystroke) { 
    const query = "https://api.themoviedb.org/3/search/tv?api_key="; 
    fetch(query + key + '&language=en-US&query=' + keystroke) 
     .then((show) => { 
     show.json().then((obj) => { 
      // grab the items we want from the response 
      let resultItems = obj.results.map((show, index) => { 
      return { 
       id: show.id, 
       poster: show.poster_path, 
       rating: show.vote_average, 
       backdrop: show.backdrop_path, 
      }; 
      }); 
      // return our newly formed object 
      return { data: resultItems } 
     }); 
     }); 
    } 

Hier ist, wo ich versuche, die Service-Daten zu empfangen, in meinem:

landingpage.component. ts

getKey(keystroke) { 
     this.TaskService.addKey(keystroke) 
     .subscribe(res => { 
      this.shows = res.data; // trying to receive service info here 
     }); 
    } 

Wenn ich zu bauen versuchen, erhalte ich die folgenden Fehler in meinem Landing com Komponente:

Die Eigenschaft 'subscribe' existiert nicht beim Typ 'void'.

Ich habe versucht, Karte anstelle von abonnieren, aber es gibt einen ähnlichen Fehler zurück.

Wie kann ich das Objektergebnis von meinem Dienst an meine Komponente senden?

addKey(keystroke): Observable<any> { 
    const query = "https://api.themoviedb.org/3/search/tv?api_key="; 
    return this.http.get(query + key + '&language=en-US&query=' + keystroke) 
     .map(show => { 
     show.json().then((obj) => { 
      // grab the items we want from the response 
      let resultItems = obj.results.map((show, index) => { 
      return { 
       id: show.id, 
       poster: show.poster_path, 
       rating: show.vote_average, 
       backdrop: show.backdrop_path, 
      }; 
      }); 
      // return our newly formed object 
      return { data: resultItems } 
     }); 
     }); 
    } 

Wenn Sie Sie wirklich holen wollen verwenden können, wenn:

Answer 1

Es aussieht wie du bist ein return in Ihrem Service-Methode fehlt, habe ich auch mit http unserer Diskussion in den Kommentaren geändert Sie:

• Stellen Sie die Methode Rückkehr Signatur Promise<any>
• Verwendung then statt map im Dienst
• Verwenden then statt subscribe in der Komponente