对离子完全陌生,但是想尽快学习,我需要您的最亲切帮助。 基本上,开发使用ionic 3.19的应用程序,该应用程序在两个选项卡(WeatherPage和ForecastPage)中显示当前天气和天气预报。 得到:模块“ AppModule”导入的意外值“ undefined” 我的 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 { MyApp } from ‘./app.component’;
import { WeatherApiPage } from ‘../pages/weather-api/weather-api’;
import { ForecastPage } from ‘../pages/forecast/forecast’;
import { WeatherPage } from ‘../pages/weather/weather’;
import { AppConstants } from ‘../providers/app-constants/app-constants’;
import { WeatherApi } from ‘../providers/weather-api/weather-api’;
import { ChartModule } from ‘highcharts’;
@NgModule({
declarations: [
MyApp,
WeatherApiPage,
ForecastPage,
WeatherPage
],
imports: [
ChartModule,
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
WeatherApiPage,
ForecastPage,
WeatherPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AppConstants,
WeatherApi
]
})
export class AppModule {}
有什么想法可以解决吗?非常感谢你!
forecast.ts :
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppConstants } from '../../providers/app-constants/app-constants';
import { WeatherApi } from '../../providers/weather-api/weather-api';
/**
* Generated class for the ForecastPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-forecast',
templateUrl: 'forecast.html',
providers: [AppConstants, WeatherApi]
})
export class ForecastPage {
forecastForm: FormGroup;
private appConstants: any;
private weather: any;
private geometry: any;
private minWeather: number[][];
private maxWeather: number[][];
private weatherTime: any;
weatherResult: boolean;
summaryIcon: string;
chartValue: {};
constructor(private navController: NavController, private fb: FormBuilder, appConstants: AppConstants, weatherApi: WeatherApi) {
this.forecastForm = fb.group({'location': ['', Validators.compose([Validators.required,Validators.pattern('[a-zA-Z, ]*'),
Validators.minLength(3),Validators.maxLength(100)])],'forecastType': 'daily'});
this.appConstants = appConstants;
this.weather = weatherApi;
this.geometry = { "longitude":"", "latitude":""};
this.minWeather = new Array();
this.maxWeather = new Array();
this.weatherTime = new Array();
this.weatherResult = false;
this.summaryIcon ="";
}
ionViewDidLoad() {
console.log('ionViewDidLoad ForecastPage');
}
filterJson(json,forecastType) {
this.minWeather = new Array();
this.maxWeather = new Array();
this.weatherTime = new Array();
for(var i=0;i<json.length;i++)
{
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var b: Date = new Date(json[i].time * 1000);
if(forecastType == "daily")
{
this.weatherTime.push(b.getDate()+" "+months[b.getMonth()]+" "+b.getFullYear());
this.maxWeather.push(json[i].temperatureMax);
this.minWeather.push(json[i].temperatureMin);
}
else
{
this.weatherTime.push(b.getDate()+" "+months[b.getMonth()]+" "+b.getFullYear() +" - "+b.getHours() +" hours");
this.minWeather.push(json[i].temperature);
}
}
}
getForecast(formData: any) {
this.weather.getGeometry(this.appConstants.getGoogleAPIURL(), formData.value.location).
subscribe((data: any) => {
this.geometry.longitude = data.results[0].geometry.location.lng;
this.geometry.latitude = data.results[0].geometry.location.lat;
this.weather.getCurrentWeather(this.geometry.longitude,this.geometry.latitude).
subscribe((weatherData: any) => {
this.weatherResult = true;
if(formData.value.forecastType == "daily")
{
this.filterJson(weatherData.daily.data,formData.value.forecastType);
this.chartValue = {
title : { text : 'Weather Forecast' },
chart: { type: 'column' },
xAxis: { categories: this.weatherTime },
series: [
{ name : 'Min Temp', data: this.minWeather},
{ name : 'Max Temp', data: this.maxWeather}
]
};
}
else
{
this.filterJson(weatherData.hourly.data,formData.value.forecastType);
this.chartValue = {
title : { text : 'Weather Forecast' },
chart: { type: 'column' },
xAxis: { categories: this.weatherTime },
series: [
{ name : 'Min Temp', data: this.minWeather},
{ name : 'Max Temp', data: this.maxWeather}
]
};
}
});
});
}
}
答案 0 :(得分:0)
尝试使用原始代码制作 chartmodule.forRoot(highcharts)。
在 app.module.ts
中import { ChartModule } from 'highcharts';
import * as highcharts from 'highcharts';
imports:[
BrowserModule,
ChartModule.forRoot(highcharts),
IonicModule.forRoot(MyApp)
]