Question

我正在开发一个用户搜索电视节目的应用程序，以及用户应该在播放该电视节目的最后一集时看到的用于TMDB的api调用。我在显示最后一部分时遇到了麻烦 - 显示上一个播出的剧集。

这是我的服务（系列服务），从中我得到一些信息，如名称，投票，简单的概述。我还有一项服务，可以从电视节目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中显示它？

Answer 1

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

Search.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>

Search.ts：

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

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

在Ionic中显示来自TMDB-api调用的特定数据

1 个答案: