База данных кино популярных людей API с Ionic 3 - PullRequest
Новая
       8

База данных кино популярных людей API с Ionic 3

0 голосов
/ 05 июля 2018

Я пытаюсь создать приложение ionic 3, используя API базы данных фильмов.

Популярная страница людей в моем приложении просматривает список с использованием API сайта, как это было бы. Проблема, с которой я сталкиваюсь, состоит в том, когда нажимать на имя актера / актрисы, страница с подробной информацией о людях должна просматривать все, что есть на сайте. Но API использует идентификатор актера / актрисы в API. Я использовал идентификатор человека в качестве переменной и перенес его на страницу сведений о людях (как показано ниже) и извлек ее с помощью 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>')
  }

}

люди-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;
 });
 }

 }

люди-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>

Ответы [ 2 ]

0 голосов
/ 14 августа 2018

В вашем 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;

Это должно дать вам правильное удостоверение личности. И, кстати, я вижу, что вы делаете this.people = data; в конце вашего кода. Я бы порекомендовал вам создать другой объект для этих данных, а не перезаписывать ваш peopleId-объект. Например, в верхней части файла: 

peopleData: any;

А потом вы просто говорите: 

this.peopleData = data;

Не забудьте заменить все people. -интерполяции в people-detail.html на peopleData.

0 голосов
/ 01 августа 2018

В вашем people.html кажется, что когда вы открываете данные о человеке, вы нажимаете его идентификатор, но в вашем файле people-detail.ts вы присваиваете этот идентификатор переменной people. Когда вы получаете детали позже, вы используете Const peopleid = this.people.id Такого не должно быть. Попробуйте использовать Const peopleid = this.people.

...