ionic-framework - 模块“AppModule”导入的意外值“未定义”
问题描述
对 ionic 完全陌生,但想尽快学习,我需要您最友善的帮助。基本上,使用 ionic 3.19 开发一个应用程序,在两个选项卡(WeatherPage 和 ForecastPage)中显示当前天气和天气预报。并得到:模块“AppModule”导入的意外值“未定义”我的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 {}
有什么想法可以解决吗?非常感谢!
预测.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}
]
};
}
});
});
}
}
解决方案
尝试使用您的原始代码制作chartmodule.forRoot(highcharts) 。
在app.module.ts
import { ChartModule } from 'highcharts';
import * as highcharts from 'highcharts';
imports:[
BrowserModule,
ChartModule.forRoot(highcharts),
IonicModule.forRoot(MyApp)
]
推荐阅读
- java - 流循环仅在第一行注入字符串
- dataframe - 将张量的数据框保存到文件中以便于加载和访问的方法?
- angular - 为什么在 ng-select2 下拉列表中添加额外的按钮标签
- ios - fastlane 徽章单张图片
- ffmpeg - 我可以使用 ffmpeg 减少缓冲和延迟吗?
- intel - 在 CPU 上使用 OpenVINO 模型与 Intel Compute Stick 2 的性能差异很大
- autodesk-forge - 从IFC文件导入到forge时如何获取网格(建筑基线)信息?
- spring-boot - Spring boot 找不到约束的验证器
- c# - 检查进程是否已关闭
- angularjs - 防止在 Safari 浏览器中单击鼠标右键