api - The Movie Database 流行人物 api with ionic 3

问题描述

我正在尝试使用电影数据库 api 构建一个 ionic 3 应用程序。

我的应用程序中的热门人物页面使用网站的 api 来查看列表。我面临的问题是何时单击演员/女演员姓名，人物详细信息页面应查看网站上的所有内容。但是 api 使用 api 中的演员/女演员 ID。我使用人员的 ID 作为变量并将其推送到人员详细信息页面（如下所示），并使用 navparams 检索它，但似乎没有任何效果。浏览器的控制台显示 json 内容，但我无法在 people-detail.html 中检索它。

我正在尝试找到一种解决方案来检索 json 并在 people-detail.html 中查看它

我需要你的帮助，提前谢谢...

注意：我隐藏了 apiKey，因为它是私钥。

这是我所做的澄清：-

people.html:-

<ion-content padding>
  <ion-list *ngFor="let people of peoples">
    <ion-item (click)="openPeopleDetailPage(people.id)">
      <ion-avatar item-start>
        <img src="{{'https://image.tmdb.org/t/p/w600_and_h900_bestv2'+people.profile_path}}">
      </ion-avatar>
      <h2>{{people.name}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

people.ts:-

export class PeoplePage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private peoplesprovider: PeoplespProvider) {

    //popular peoples
    this.peoplesprovider.getPeople().subscribe(data => {
      console.log(data.results);
      this.peoples = data.results;
    });

  }

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

  openPeopleDetailPage(people: any){
   this.navCtrl.push(PeopleDetailPage, {people:people})
  }

}

peopleProvider.ts:-

@Injectable()
export class PeoplespProvider {

 people_url: string= "https://api.themoviedb.org/3/person/popular?<api_key>";

  constructor(public http: HttpClient) {
    console.log('Hello PeoplespProvider Provider');
  }

  getPeople(){
    return this.http.get(this.people_url)
  }

  getPeopleDetail(peopleId: number){
    return this.http.get('https://api.themoviedb.org/3/person/${peopleId}? 
    <api_key>')
  }

}

people-detail.ts:-

 export class PeopleDetailPage {

 people: any;
 detail: any;

 constructor(public navCtrl: NavController, public navParams: NavParams, 
 private peoplesprovider: PeoplespProvider) {

 this.people = this.navParams.get('people');
 }

 ionViewDidLoad() {
 console.log('ionViewDidLoad PeopleDetailPage');

 const peopleId = this.people.id;
 this.peoplesprovider.getPeopleDetail(peopleId).subscribe(data => {
  console.log(data);
  this.people = data;
 });
 }

 }

people-detail.html:-

<ion-content padding>
 <div>
 <div text-center>
  <img class="people-img" src=" 
 {{'https://image.tmdb.org/t/p/w600_and_h900_bestv2'+people?.profile_path}}">
</div>
<div>
  <h1 text-center>{{people?.name}}</h1>
</div>

<div>
  <ion-toolbar>
    <ion-segment [(ngModel)]="controls" color="secondary">
      <ion-segment-button value="info">Info</ion-segment-button>
      <ion-segment-button value="movies">Movies</ion-segment-button>
      <ion-segment-button value="tv-shows">TV Shows</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</div>

<div [ngSwitch]="controls">

  <div *ngSwitchCase="'info'">
    <ion-grid>
      <ion-row>
        <p>Born on <b>14/02/1986</b></p>
      </ion-row>
      <ion-row>
        <p text-wrap>From <b></b></p>
      </ion-row>
      <ion-row>
        <p>Also known as <b>Alex Daddario</b></p>
      </ion-row>
    </ion-grid>
    <p text-wrap>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
  </div>

  <div *ngSwitchCase="'movies'">
    <ion-list>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <p class="movie-year">2018</p>
        <h2 text-wrap>The Big Bang Theory is here</h2>
        <p class="role-name">Constance Blackwood</p>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <p class="movie-year">2018</p>
        <h2>Cher</h2>
        <p class="role-name">Constance Blackwood</p>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <p class="movie-year">2018</p>
        <h2>Cher</h2>
        <p class="role-name">Constance Blackwood</p>
      </ion-item>
    </ion-list>
  </div>

  <div *ngSwitchCase="'tv-shows'">
    <ion-list>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <p class="movie-year">2018</p>
        <h2 text-wrap>The Big Bang Theory is here</h2>
        <p class="role-name">Constance Blackwood</p>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <p class="movie-year">2018</p>
        <h2>Cher</h2>
        <p class="role-name">Constance Blackwood</p>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/1.jpg">
        </ion-thumbnail>
        <p class="movie-year">2018</p>
        <h2>Cher</h2>
        <p class="role-name">Constance Blackwood</p>
      </ion-item>
    </ion-list>
  </div>

</div>

标签： apiionic3themoviedb-api

api - The Movie Database 流行人物 api with ionic 3

问题描述

解决方案

推荐阅读