未捕获（承诺）：TypeError：无法读取属性

Question

我是 IONIC 和 ANGULAR 的新手。 我正在尝试访问 OpenWeatherMap API，但我遇到了“未捕获（承诺）：TypeError：无法读取属性”的问题。 我在互联网上遵循了一些教程，但我仍然卡住了。

我的来源是：

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

这是错误信息：

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 包：

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

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

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

系统：

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 {}

Answer 1

您不必创建新的 Promise，而且由于您使用的是 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);
});