在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?
答
解决了! 而不是发送整个系列对象,我只是传递系列的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;
})
});