Angular 尝试使用REST服务时,Ionic屏幕变为空白
我目前正在尝试在Ionic中使用RESTful服务 我在需要它的页面上导入了REST服务,还导入了从数据库检索用户的方法 然而,在我输入并保存方法并导入所有内容后,我的ionic lab移动屏幕是空白的。我试图撤销所有代码,但手机屏幕仍然空白 我可以知道为什么吗 我的Angular 尝试使用REST服务时,Ionic屏幕变为空白,angular,rest,ionic-framework,ionic3,Angular,Rest,Ionic Framework,Ionic3,我目前正在尝试在Ionic中使用RESTful服务 我在需要它的页面上导入了REST服务,还导入了从数据库检索用户的方法 然而,在我输入并保存方法并导入所有内容后,我的ionic lab移动屏幕是空白的。我试图撤销所有代码,但手机屏幕仍然空白 我可以知道为什么吗 我的app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@an
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpClientModule } from '@angular/common/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RestProvider } from '../providers/rest/rest';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RestProvider
]
})
export class AppModule {}
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class RestProvider {
apiUrl = '';
constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}
getUsers() {
return new Promise(resolve => {
this.http.get(this.apiUrl+'/users').subscribe(data => {
resolve(data);
}, err => {
console.log(err);
});
});
}
}
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController, AlertController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage{
users: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public menuCtrl: MenuController, public alertCtrl: AlertController, public restProvider: RestProvider) {
this.getUsers();
}
getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = data;
console.log(this.users);
});
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
我的REST提供者REST.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpClientModule } from '@angular/common/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RestProvider } from '../providers/rest/rest';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RestProvider
]
})
export class AppModule {}
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class RestProvider {
apiUrl = '';
constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}
getUsers() {
return new Promise(resolve => {
this.http.get(this.apiUrl+'/users').subscribe(data => {
resolve(data);
}, err => {
console.log(err);
});
});
}
}
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController, AlertController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage{
users: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public menuCtrl: MenuController, public alertCtrl: AlertController, public restProvider: RestProvider) {
this.getUsers();
}
getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = data;
console.log(this.users);
});
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
我的主页home.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpClientModule } from '@angular/common/http';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RestProvider } from '../providers/rest/rest';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RestProvider
]
})
export class AppModule {}
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class RestProvider {
apiUrl = '';
constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}
getUsers() {
return new Promise(resolve => {
this.http.get(this.apiUrl+'/users').subscribe(data => {
resolve(data);
}, err => {
console.log(err);
});
});
}
}
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController, AlertController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage{
users: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public menuCtrl: MenuController, public alertCtrl: AlertController, public restProvider: RestProvider) {
this.getUsers();
}
getUsers() {
this.restProvider.getUsers()
.then(data => {
this.users = data;
console.log(this.users);
});
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
使用rxjs中的toPromise方法:
import 'rxjs/add/operator/toPromise';
getUsers() {
return this.http.get(this.apiUrl+'/users')
.toPromise()
.then(data => data.json())
.catch(err => console.log(err))
}
事实证明,使用VisualStudio的emulator会导致此问题。使用外部仿真器(如您自己的设备)不会导致此类问题。模块中是否有restprovider?Pd:您可以在suscribe之后使用toPromise()而不是新的promise@saescudero对不起,我不明白你的意思。我在app.module.ts中导入了它,不是吗?是的。控制台中有一些错误?请记住,当您使用resolve(data)时,它不是json@saescudero是的,每当我运行我的应用程序时,它都会显示此错误
模块的“C:/…rxjs/Rx”没有导出成员“SubscriptionLike”。