在Ionic中顯示來自TMDB-api的特定數據

我正在開發一個應用程序，用戶搜索電視節目以及從用戶查看該TV的最後一集時的TMDB的api調用，節目已播出。我無法顯示最後一部分 - 顯示最後一次播出的劇集。在Ionic中顯示來自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') 
     ); 

     }

我用於顯示的電視節目（Series.html）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？

來源

2017-10-21 Martin Matsson

解決了！而不是發送整個系列對象，我只是傳遞系列的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; 
     }) 
    });

來源

2017-10-22 18:59:32

在Ionic中顯示來自TMDB-api的特定數據

回答

相關問題