angular - 错误 : Unhandled Promise rejection in AngularJS 2

Question

我正在构建一个使用 http 从 The Movie DataBase Api 获取数据的 Angular Provider。

但是，尽管如此，我在使用该提供商的页面中遇到了这个错误:

因此，提供者和页面的源代码是:

tmdb.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Rx';

@Injectable()

export class TMDB {
  apiUrl: string = "https://api.themoviedb.org/3";
  apiKey: string = "xxx";
  apiLang: string = "pt-BR";

  posterLargePath: string = "https://image.tmdb.org/t/p/w500_and_h281_bestv2";
  posterMiniPath: string = "https://image.tmdb.org/t/p/w116_and_h174_bestv2";

  constructor(public http: Http) {
  }

  getSearchMovie(query: string){
    let body = {"api_key":this.apiKey, "language":this.apiLang, "query":query, "include_adult": false};
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
        return this.http.get(this.apiUrl + "/search/movie?" + JSON.stringify(body), options)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'))
    }

  getDiscoverMovies(){
    let body = {"api_key":this.apiKey, "language":this.apiLang, "page":1, "sort_by":"popularity.desc", "include_video": false, "include_adult": false};
        let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
     return this.http.get(this.apiUrl + "/discover/movie?" + JSON.stringify(body), options)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'))
  }

  getPosterLargeUrl(){
    return this.posterLargePath;
  }

  getPosterMiniUrl(){
    return this.posterMiniPath;
  }

}

page.ts

import { Component } from '@angular/core';
//import{ Http } from '@angular/http';
import { NavController } from 'ionic-angular';
//import 'rxjs/add/operator/map'
import { TMDB } from '../../providers/tmdb.ts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  //,providers: [TMDB]
})
export class HomePage {
  discoverMovies: any;
  posterMiniPath: string;
  posterLargePath: string;

  constructor(public navCtrl: NavController) {
    TMDB.getDiscoverMovies().subscribe(
                              movies => this.discoverMovies = movies, //Bind to view
                              err => {
                                  // Log errors if any
                                  console.log(err);
                              });
    this.posterMiniPath = TMDB.getPosterMiniUrl();
    this.posterLargePath = TMDB.getPosterLargeUrl();
  }

}

我需要知道这是错误。有人能帮我吗？请记住，我使用的是 Ionic Framework v. 2。

编辑 1:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TMDB } from '../../providers/tmdb.ts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [TMDB]
})
export class HomePage {
  discoverMovies: any;
  posterMiniPath: string;
  posterLargePath: string;

  constructor(public navCtrl: NavController, public tmdb: TMDB) {
    tmdb.getDiscoverMovies().subscribe(
                              movies => this.discoverMovies = movies,
                              err => {
                                  console.log(err);
                              });
    this.posterMiniPath = tmdb.getPosterMiniUrl();
    this.posterLargePath = tmdb.getPosterLargeUrl();
  }

}

编辑 2:

应用程序模块.ts:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PageIntro } from '../pages/intro/page';
import { TMDB } from '../providers/tmdb.ts';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PageIntro
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    PageIntro
  ],
  providers: [ TMDB ]
})
export class AppModule {}

tmdb.ts:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Rx';

/*
  Generated class for the TMDB provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()

export class TMDB {
  apiUrl: string = "https://api.themoviedb.org/3";
  apiKey: string = "xxxx";
  apiLang: string = "pt-BR";

  posterLargePath: string = "https://image.tmdb.org/t/p/w500_and_h281_bestv2";
  posterMiniPath: string = "https://image.tmdb.org/t/p/w116_and_h174_bestv2";

  constructor(public http: Http) {
  }

  getSearchMovie(query: string){
    let body = {"api_key":this.apiKey, "language":this.apiLang, "query":query, "include_adult": false};
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
        return this.http.get(this.apiUrl + "/search/movie?" + JSON.stringify(body), options)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'))
    }

  getDiscoverMovies(){
    let body = {"api_key":this.apiKey, "language":this.apiLang, "page":1, "sort_by":"popularity.desc", "include_video": false, "include_adult": false};
        let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
     return this.http.get(this.apiUrl + "/discover/movie?" + JSON.stringify(body), options)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'))
  }

  getPosterLargeUrl(){
    return this.posterLargePath;
  }

  getPosterMiniUrl(){
    return this.posterMiniPath;
  }

}

Answer 1

当它是一个实例 方法时，您正在尝试静态调用 TMDB.getDiscoverMovies。你应该做什么。你应该做的是，将它添加到 @NgModule.providers，然后将它注入(inject)到 HomePage

@NgModule({
  providers: [ TMDB ]
})
class AppModule {}

@Component({})
class HomePage {
  constructor(private tmdb: TMDB) {
    tmdb.getDiscoverMovies().subscribe(
        movies => this.discoverMovies = movies, //Bind to view
        err => console.log(err));
    this.posterMiniPath = tmdb.getPosterMiniUrl();
    this.posterLargePath = tmdb.getPosterLargeUrl();
  }
}

请注意，我们现在将 TMDB 用作实例，而不是静态使用。