未捕获（承诺）：TypeError：无法读取未定义的属性“创建”（离子 3.9，Angularjs 5.0.3）

Question

我是离子新手。我想通过 API 密钥访问数据，但出现如下错误：

运行时错误：未捕获（承诺）：错误：无法读取属性“创建” 未定义的 TypeError：无法读取未定义的属性“创建” 在新的 SamplePage (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://localhost:8100/build/vendor.js:13802:53) 在 createRootView (http://localhost:8100/build/vendor.js:13692:5) 在 callWithDebugContext (http://localhost:8100/build/vendor.js:15093:42) 在 Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/vendor.js:14394:12) 在 ComponentFactory_.create (http://localhost:8100/build/vendor.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) 在 NavControllerBase._fireError (http://localhost:8100/build/vendor.js:51328:16) 在 NavControllerBase._failed (http://localhost: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://localhost:8100/build/vendor.js:4982:33) 在 t.invoke (http://localhost:8100/build/polyfills.js:3:14916) 在 r.run (http://localhost:8100/build/polyfills.js:3:10143) 在http://localhost:8100/build/polyfills.js:3:20242

示例.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');
            }
        );
    }
}

示例.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>

在提供者文件夹中 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());
    }
}

我不知道如何克服这一点。谁能给我一些想法？

Answer 1

我认为您错过了将 loadingCtrl 初始化为 LoadingController 的构造函数，因此它无权访问 LoadingController 的 create 属性：

constructor(private loadingCtrl: LoadingController)

Answer 2

请在您的两个组件（服务和控制器）中另外添加以下模块

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';