Question

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

我的应用程序中的“受欢迎的人”页面会使用站点的api来查看列表。我面临的问题是何时单击演员名称，人员详细信息页面应查看网站上所有内容。但是api使用api中的actor / actress 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>

Answer 1

在您的people.html中，看来您在打开一个人的详细信息时会推送该人的ID，但是在您的people-detail.ts中，您已将该ID分配给了人变量。当您稍后获取详细信息时，您正在使用 const peopleid = this.people.id 事实并非如此。尝试使用 const peopleid = this.people。

Answer 2

在您的people.html中，您说的是 people.id ;

<ion-item (click)="openPeopleDetailPage(people.id)">

但是在people-detail.ts中您是在说

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

...然后

const peopleId = this.people.id;

此代码正在尝试访问 people.id.id ，但这不存在（我想是吗？）。

解决方案

尝试使用此代替：

const peopleId = this.people;

这应该给您正确的ID。顺便说一句，我看到您在代码末尾做了this.people = data;。我建议您为此数据创建一个不同的对象，而不是覆盖您的peopleId对象。例如，在您的文件顶部：

peopleData: any;

然后，您只需说：

this.peopleData = data;

请记住将people.中的所有people-detail.html插值替换为peopleData.

电影数据库与ION 3的人气人物api

2 个答案: