0

我正在尝试使用电影数据库 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>

4

2 回答 2

0

在您的 people.html 中，似乎当您打开一个人的详细信息时，您正在推送该人的 ID，但在您的 people-detail.ts 中，您将此 ID 分配给了 people 变量。当您稍后获取详细信息时，您正在使用 Const peopleid = this.people.id 这不应该是这种情况。尝试使用 Const peopleid = this.people。

于 2018-08-01T18:11:05.777 回答
0

在你的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.-interpolations替换people-detail.html为peopleData.

于 2018-08-14T09:02:45.377 回答