错误:AngularJS 2中未处理的承诺拒绝
我正在构建一个Angular提供者,它使用http从电影数据库Api获取数据 但是,尽管如此,我在使用该提供商的页面中发现了以下错误: 因此,提供程序和页面的源代码为: tmdb.ts错误:AngularJS 2中未处理的承诺拒绝,angular,typescript,ionic-framework,Angular,Typescript,Ionic Framework,我正在构建一个Angular提供者,它使用http从电影数据库Api获取数据 但是,尽管如此,我在使用该提供商的页面中发现了以下错误: 因此,提供程序和页面的源代码为: tmdb.ts import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import 'rxjs/add/operator/map'; import
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;
}
}
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();
}
}
page.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;
}
}
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();
}
}
我需要知道这就是问题所在。有人能帮我吗?记住我使用的是离子框架v。二,
编辑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:
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();
}
}
app.module.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;
}
}
当它是一个实例方法时,您试图静态调用
TMDB.getDiscoveryMovies
。你应该做的。您应该做的是将其添加到@NgModule.providers
,然后将其插入主页
@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
用作实例,而不是静态使用。您好,您的屏幕截图不可读。顺便说一句,请在主题中添加NgModule声明,它可能有用。另一方面,如果不注入服务,就不能使用TMDB服务。这可能是你的问题的原因。图像修复了,我按照你说的做了,但没有修复错误。你的屏幕截图证实了我的假设。在使用之前,必须先注入TMBD。你也必须在你的模块中处理它。下面的答案向您展示了正确的操作。我按照您所说的做了,但是我在私有tmdb:tmdb
上遇到了这个错误:找不到名称“tmdb”
,并且导出类的构造函数的参数“tmdb”已经或正在使用私有名称“tmdb
。这是什么?您仍然需要从“../../providers/TMDB.ts”导入{TMDB}导入到类中,以便您可以使用它(在模块和组件类中),请选中Edit 2。确保您从正确的路径导入它,因为导入不需要扩展,所以:import{TMDB}from'../../providers/TMDB'
。谢谢。