0

我正在开发一个应用程序，用户在该应用程序中搜索电视节目，并通过对 TMDB 的 api 调用，用户应该在该电视节目的最后一集播出时看到。我无法显示最后一部分 - 显示最后播出的剧集。

这是我的服务（Series-Service），我从中获得了一些信息，例如名称、投票、简单概述。我还有一项服务可以从电视节目 ID 中检索更多信息。

    searchSeries(seriesName) {
    var url = 'http://api.themoviedb.org/3/search/tv?query=&query=' + encodeURI(seriesName) + '&api_key=[MY_API_KEY]';
    var response = this.http.get(url).map(res => res.json());
    return response;
}  
  moreInfo(seriesId)
  {
    var url = 'https://api.themoviedb.org/3/tv/'+seriesId+'?api_key=[MY_API_KEY]&language=en-US'
    var response = this.http.get(url).map(res => res.json());
    return response;
  }

这是我的页面，其中包含显示数据的功能（Series.ts）：

      serie: {id};
      serieInfo: {};


      constructor(public navCtrl: NavController,
                  public navParams: NavParams,
                  public seriesService: SeriesService,
                  public alertCtrl: AlertController) {
//Get the serie object I picked in my search
        this.serie = navParams.get('serie');

//Use the ID of that object to use my other service to get more info
        console.log(this.serie.id);
        this.seriesService.moreInfo(this.serie.id).subscribe(
          data => {
            this.serieInfo = data.results;
            console.log(data);
          },
          err => {
            console.log(err);
          },
          () => console.log('Series Search Complete')
        );

      }

我的用于显示电视节目的 HTML 页面（Series.html）：

<ion-content padding>
  <div *ngIf="serie" class="selection">
    <ion-card>
      <ion-item>
        <ion-avatar item-left image-large>
          <img src="https://image.tmdb.org/t/p/w92{{serie.poster_path}}"/>
        </ion-avatar>
        <h1>{{serie.name}}</h1>
        <p>{{serie.first_air_date}}</p>
      </ion-item>

      <ion-item>
        <ion-icon name="document" item-left></ion-icon>
        <h2>Overview</h2>
        <p class="item-description">{{serie.overview}}</p>
      </ion-item>
      <ion-item>
        <ion-icon name="bookmark" item-left></ion-icon>
        <h2>Average Vote</h2>
        <p>{{serie.vote_average}}</p>
      </ion-item>
      <ion-item>
        <ion-icon name="bookmark" item-left></ion-icon>
        <h2>Air date</h2>
        <p>{{serie.last_air_date}}</p>
      </ion-item>
      <ion-row>
        <ion-col text-right>
          <button
          ion-button
          clear
          small
          (click)="onAddToFavorites(serie)">Favorite</button>
        </ion-col>
      </ion-row>
    </ion-card>
  </div>
</ion-content>

我的搜索功能（Search.ts）：

  searchForSeries(event, key) {
    if(event.target.value.length > 2) {
      this.seriesService.searchSeries(event.target.value).subscribe(
        data => {
          this.series = data.results;
          console.log(data);
        },
        err => {
          console.log(err);
        },
        () => console.log('Series Search Complete')
      );
    }
  }

  selectSeries(event, serie) {
    console.log(serie);
    this.navCtrl.push(Series, {
      serie: serie
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Search');
  }

如前所述，我可以在应用程序中看到我的第一个服务调用的信息，但在控制台日志中我可以看到来自两个 api 调用的信息。为什么我不能显示来自第二个 api 调用的数据？

这是它的外观图片： https ://imgur.com/a/HBwBl

我认为错误的是在我的 Series.ts 中，我希望它看起来像：

/*****************Don't pass id in {} *****************/
    serie: {};
      serieInfo: {};


      constructor(public navCtrl: NavController,
                  public navParams: NavParams,
                  public seriesService: SeriesService,
                  public alertCtrl: AlertController) {
        this.serie = navParams.get('serie');

        console.log(this.serie.id);
/******* BUT THEN THIS ID GETS MAD AND SAYS:
"Property 'id' does not exist on type '{}'."**********/
        this.seriesService.moreInfo(this.serie.id).subscribe(
          data => {
            this.serieInfo = data.results;
            console.log(data);
          },
          err => {
            console.log(err);
          },
          () => console.log('Series Search Complete')
        );

      }

为什么我可以在控制台日志中看到该对象，但不能在我的 Series.html 中显示它？

4

1 回答 1

0

解决了！我没有发送整个系列对象，而是传递系列的 ID。

搜索.html：

<ion-content padding>
  <ion-item>
    <ion-label color="primary" stacked>Search for a TV-show</ion-label>
    <ion-input type="text" (input)="searchForSeries($event, searchKey)"></ion-input>
  </ion-item>

  <ion-list>
    <ion-item *ngFor="let serie of series" (click)="selectSeries($event, serie.id)">
      <ion-avatar item-left>
        <img src="https://image.tmdb.org/t/p/w92{{serie.poster_path}}"/>
      </ion-avatar>
      <h2>{{serie.original_name}}</h2>
      <p class="item-description">{{serie.overview}}</p>
    </ion-item>
  </ion-list>
</ion-content>

搜索.ts：

  selectSeries(event, id) {
    console.log(id);
    this.navCtrl.push(Series, {
      id
    });
  }

系列.ts：

serie: {};


  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public seriesService: SeriesService,
              public alertCtrl: AlertController) {
    this.serie = navParams.get('serie');
    this.seriesService.moreInfo(this.navParams.get('id')).subscribe((params) => {
      let id = params['id'];
      this.seriesService.moreInfo(id).subscribe(serie => {
        console.log(serie);
        this.serie = serie;
      })
    });
于 2017-10-22T18:59:32.853 回答