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

Posted 2023-03-13

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

【英文标题】：Uncaught (in promise): TypeError: Cannot read property 'create' of undefined (ionic 3.9 , Angularjs 5.0.3)

【发布时间】：2018-06-28 09:25:31

【问题描述】：

我是离子新手。我想通过 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());
    

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

【问题讨论】：

loadingCtrl 有什么用。我看不到 loadingCtrl 的任何变量初始化。

请提供Minimal, Complete, and Verifiable example 并阅读How to ask 和How do I format my posts using Markdown or HTML?。

【参考方案1】：

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

constructor(private loadingCtrl: LoadingController)

【讨论】：

感谢您的建议@Mahesh，它清除了该错误，但现在它显示打字稿错误，您能帮我一下“对象”类型上不存在属性“json”。 getJsonData() return this.http.get('xxxxxx'').map(res => res.json());

console.log(res) 并查看响应格式。

尝试订阅 this.http.get('reddit.com/r/worldnews/.json').subscribe(res => console.log(res)); //响应是json格式

是的，我试过了，我已经在 sample.ts 中写了订阅，显示它显示了一些错误**/sample.ts, line: 39 Property 'subscribe' does not exist on type 'Subscription'. Did you mean 'unsubscribe'?**

哦，好吧，我错过了。好的，然后尝试返回，您将在订阅中获得 json 数据。 getJsonData() return this.http.get('reddit.com/r/worldnews/.json') 在 sample.ts 中 this.httpProvider.getJsonData().subscribe(result=> console.log(result); ) // 你会得到result.data.children 和 children 是一个数组，您可以从中获取所需的数据

【参考方案2】：

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

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