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

Question

我正在开发一个应用程序，用户可以在其中搜索电视节目，并且通过 api 调用 TMDB，用户应该可以看到该电视节目的最后一集播出时间。我在显示最后一部分时遇到问题 - 显示最后播出的一集。

这是我的服务（系列服务），我从中得到一些信息，如名称、投票、简单概述。我还有一项服务可以从电视节目 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 对象，而是传递了 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 调用的特定数据

Display specific data from TMDB-api call in Ionic

typescript

themoviedb-api

ionic-framework