首页 文章

未捕获(承诺):TypeError:无法读取属性

提问于
浏览
0

我是IONIC和ANGULAR的新手 . 我正在尝试访问OpenWeatherMap API,但我面临的问题是“Uncaught(承诺):TypeError:无法读取属性” . 我在互联网上关注了一些教程,但我仍然陷入困境 .

我的消息来源是:

http://blog.ionicframework.com/10-minutes-with-ionic-2-calling-an-api/ https://ionicacademy.com/http-calls-ionic/

Here is the error message:

Error: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined
    at HttpXsrfInterceptor.intercept (http://localhost:8100/build/vendor.js:121780:46)
    at HttpInterceptorHandler.handle (http://localhost:8100/build/vendor.js:121094:33)
    at MergeMapSubscriber.project (http://localhost:8100/build/vendor.js:120764:219)
    at MergeMapSubscriber._tryNext (http://localhost:8100/build/vendor.js:109480:27)
    at MergeMapSubscriber._next (http://localhost:8100/build/vendor.js:109470:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:32903:18)
    at ScalarObservable._subscribe (http://localhost:8100/build/vendor.js:109284:24)
    at ScalarObservable.Observable._trySubscribe (http://localhost:8100/build/vendor.js:20158:25)
    at ScalarObservable.Observable.subscribe (http://localhost:8100/build/vendor.js:20146:65)
    at MergeMapOperator.call (http://localhost:8100/build/vendor.js:109445:23)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at new t (http://localhost:8100/build/polyfills.js:3:21532)
    at new HomePage (http://localhost:8100/build/main.js:72:13)
    at createClass (http://localhost:8100/build/vendor.js:12519: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)

cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v7.9.0
npm               : 4.2.0
OS                : Windows 10

home.ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

//RxJS
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public previsions: Promise<any>;
  public url: "http://api.openweathermap.org/data/2.5/forecast/daily?cnt=16&appid=441728161cbc8d95e239f4c62512d1f0&q=Montpellier";

  constructor(public navCtrl: NavController, public httpClient: HttpClient) {

    //this.previsions=this.httpClient.get(this.url);
    //this.previsions.do(res => console.log(res)).subscribe(data => console.log(data))

    this.previsions = 
    new Promise(resolve => {
      // We're using Angular HTTP provider to request the data,
      // then on the response, it'll map the JSON data to a parsed JS object.
      // Next, we process the data and resolve the promise with the new data.
      this.httpClient.get(this.url)
        .map(res => res.json())
        .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          this.previsions = data.city;
          resolve(this.previsions);
        });
      });

    }

}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpClientModule } from '@angular/common/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

1 回答

  • 0

    您不必创建新的承诺,并且由于您使用的是Angular的httpClient模块,因此响应已经是JSON .

    这就是获取JSON数据所需的全部内容:

    const url: string = 'http://api.openweathermap.org/data/2.5/forecast/daily?cnt=16&appid=441728161cbc8d95e239f4c62512d1f0&q=Montpellier';
    this.http.get(url).subscribe((data) => {
      console.log('get', data);
    }, (error) => {
      console.log('get - ERROR', error);
    });
    

相关问题