从Angular 2

Question

我正在尝试从我的服务功能中检索数据，但遇到了问题。我的LandingPage组件代码（如下所示）向我的服务函数发送一个按键，然后返回一个充满数据的对象。

但我无法让服务对象返回我的LandingPage。以下是我创建服务的方式：

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 }
        });
      });
  }

以下是我在尝试接收服务数据的地方：

landingpage.component.ts

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

当我尝试构建时，我在LandingPage组件中收到以下错误：

  

'void'类型中不存在属性'subscribe'。

我尝试使用map而不是subscribe，但它返回了类似的错误。

如何将对象结果从我的服务发送到我的组件？

Answer 1

您的服务方法中似乎缺少return，我还在评论中更改为使用http：

  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 }
        });
      });
  }

如果你真的想使用fetch，你可以：

• 将方法返回签名设置为Promise<any>
• 在服务中使用then代替map
• 在组件
中使用then代替subscribe