[英]Uncaught (in promise): TypeError: Cannot read property 'create' of undefined (ionic 3.9 , Angularjs 5.0.3)
I'm new to ionic. 我是离子新手。 I want to access the data through an API key, but I got an error like this:
我想通过API密钥访问数据,但是出现了这样的错误:
Runtime Error : Uncaught (in promise): Error: Cannot read property 'create' of undefined TypeError: Cannot read property 'create' of undefined at new SamplePage ( http://localhost:8100/build/main.js:1143:41 ) at createClass ( http://localhost:8100/build/vendor.js:12521:20 ) at createDirectiveInstance ( http://localhost:8100/build/vendor.js:12364:37 ) at createViewNodes ( http://localhost:8100/build/vendor.js:13802:53 ) at createRootView ( http://localhost:8100/build/vendor.js:13692:5 ) at callWithDebugContext ( http://localhost:8100/build/vendor.js:15093:42 ) at Object.debugCreateRootView [as createRootView] ( http://localhost:8100/build/vendor.js:14394:12 ) at ComponentFactory_.create ( http://localhost:8100/build/vendor.js:11313:46 ) at ComponentFactoryBoundToModule.create ( http://localhost:8100/build/vendor.js:4275:29 ) at NavControllerBase._viewInit ( http://localhost:8100/build/vendor.js:51546:44 ) at c ( http://localhost:8100/build/polyfills.js:3:19752 ) at Object.reject ( http:
运行时错误:未捕获(承诺):错误:无法读取未定义Type的属性'create'错误:无法读取新SamplePage上未定义的属性'create'( http:// localhost:8100 / build / main.js:1143:41 )在createClass( http:// localhost:8100 / build / vendor.js:12521:20 )在createDirectiveInstance( http:// localhost:8100 / build / vendor.js:12364:37 )在createViewNodes( http://在callWithDebugContext( http:// localhost:8100 / build / vendor )的createRootView( http:// localhost:8100 / build / vendor.js:13692:5 )处的localhost:8100 / build / vendor.js:13802:53 ) 。在ComponentFactory_.create( http:// localhost:8100 / build / vendor )上的Object.debugCreateRootView [as createRootView]( http:// localhost:8100 / build / vendor.js:14394:12 )处的js:15093:42 ) 。 js:11313:46 )在ComponentFactoryBoundToModule.create( http:// localhost:8100 / build / vendor.js:4275:29 )在NavControllerBase._viewInit( http:// localhost:8100 / build / vendor.js:51546: 44 )在c( http:// localhost:8100 / build / polyfills.js:3:19752 )在Object.reject( http: //localhost:8100/build/polyfills.js:3:19174 ) at NavControllerBase._fireError ( http://localhost:8100/build/vendor.js:51328:16 ) at NavControllerBase._failed ( http://localhost:8100/build/vendor.js:51321:14 ) at http://localhost:8100/build/vendor.js:51368:59 at t.invoke ( http://localhost:8100/build/polyfills.js:3:14976 ) at Object.onInvoke ( http://localhost:8100/build/vendor.js:4982:33 ) at t.invoke ( http://localhost:8100/build/polyfills.js:3:14916 ) at r.run ( http://localhost:8100/build/polyfills.js:3:10143 ) at http://localhost:8100/build/polyfills.js:3:20242
//localhost:8100/build/polyfills.js:3:19174 )在NavControllerBase._fireError( HTTP://本地主机:8100 /构建/ vendor.js:51328:16在NavControllerBase._failed)( HTTP://本地主机: 8100 / build / vendor.js:51321:14 )位于http:// localhost:8100 / build / vendor.js:51368:59 (t.invoke)( http:// localhost:8100 / build / polyfills.js:3 :14976 )在Object.onInvoke( HTTP://本地主机:8100 /构建/ vendor.js:4982:33 )在t.invoke( HTTP://本地主机:8100 /构建/ polyfills.js:3:14916 )在r.run( http:// localhost:8100 / build / polyfills.js:3:10143 )位于http:// localhost:8100 / build / polyfills.js:3:20242
sample.ts 样本
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpProvider } from '../../providers/http/http';
import { NavController, LoadingController } from 'ionic-angular';
import 'rxjs/add/operator/map';
/**
* Generated class for the SamplePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info
on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-sample',
templateUrl: 'sample.html',
providers: [HttpProvider]
})
export class SamplePage {
newsData: any;
loading: any;
constructor(public navCtrl: NavController, public navParams:
NavParams, private httpProvider: HttpProvider) {
this.loading = this.loadingCtrl.create({
content: `
<ion-spinner ></ion-spinner>`
});
this.getdata();
}
ionViewDidLoad() {
console.log('ionViewDidLoad SamplePage');
}
getdata() {
this.httpProvider.getJsonData().subscribe(
result => {
this.newsData = result.data.children;
console.log("Success : " + this.newsData);
},
err => {
console.error("Error : " + err);
},
() => {
console.log('getData completed');
}
);
}
}
sample.html sample.html
<ion-header>
<ion-navbar>
<ion-title>sample</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list >
<ion-item text-wrap *ngFor="let item of newsData" >
<p >{{item.data.title}}</p>
</ion-item>
</ion-list>
</ion-content>
In Provider folder http.ts 在提供程序文件夹http.ts中
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
/*
Generated class for the HttpProvider provider.
See https://angular.io/guide/dependency-injection for more info on
providers
and Angular DI.
*/
@Injectable()
export class HttpProvider {
constructor(public http: HttpClient) {
console.log('Hello HttpProvider Provider');
}
getJsonData() {
return this.http.get('https://www.reddit.com/r/worldnews/.json').map(r es
=> res.json());
}
}
I don't know how to overcome this. 我不知道该如何克服。 Could anyone please give me some ideas?
有人可以给我一些想法吗?
Please additionally add this below modules in your both components (service and controller) 请在以下两个模块(服务和控制器)中另外添加以下模块
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.