加载动画直到数据加载到 Typescript (ionic)
loading animation until data is loaded in Typescript (ionic)
我想在屏幕上添加动画,直到项目加载完毕。
constructor(
public platform: Platform,
private network: NetworkService,
public navContrl: NavController,
public modalCtrl: ModalController
) {
this.loadProjects();
this.admin = this.network.isUserAdmin();
}
loadProjects() {
this.network.getAllProjects()
.then(projects => this.projs = projects)
.catch(err => this.logout());
}
我的第一个想法是实施 settimeout,这是最糟糕的解决方案。有什么好的方法可以解决吗?
您需要导入加载程序并根据您的异步代码使用它:
import { LoadingController, ModalController, Platform } from "ionic-angular";
// add your further imports here...
constructor(
public platform: Platform,
private network: NetworkService,
public navContrl: NavController,
public modalCtrl: ModalController,
// inject it:
public loadingCtrl: LoadingController
) {
this.loadProjects();
this.admin = this.network.isUserAdmin();
}
loadProjects() {
// start loader:
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
this.network.getAllProjects()
.then((projects) => {
this.projs = projects;
loading.dismiss();
})
.catch(err => this.logout());
}
不确定您是否在案例中发布了完整的代码示例。所以我希望这会有所帮助。在此处查看用法:https://ionicframework.com/docs/api/components/loading/LoadingController/
类似的替代方案,使用 async
和 await
。
async loadProjects() {
// start loader:
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
try {
await loading.present();
this.projs = await this.network.getAllProjects();
}
catch (error) {
//TODO: Log the error, show a friendly message
this.logout();
}
finally {
loading && loading.dismiss();
}
}
我想在屏幕上添加动画,直到项目加载完毕。
constructor(
public platform: Platform,
private network: NetworkService,
public navContrl: NavController,
public modalCtrl: ModalController
) {
this.loadProjects();
this.admin = this.network.isUserAdmin();
}
loadProjects() {
this.network.getAllProjects()
.then(projects => this.projs = projects)
.catch(err => this.logout());
}
我的第一个想法是实施 settimeout,这是最糟糕的解决方案。有什么好的方法可以解决吗?
您需要导入加载程序并根据您的异步代码使用它:
import { LoadingController, ModalController, Platform } from "ionic-angular";
// add your further imports here...
constructor(
public platform: Platform,
private network: NetworkService,
public navContrl: NavController,
public modalCtrl: ModalController,
// inject it:
public loadingCtrl: LoadingController
) {
this.loadProjects();
this.admin = this.network.isUserAdmin();
}
loadProjects() {
// start loader:
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
this.network.getAllProjects()
.then((projects) => {
this.projs = projects;
loading.dismiss();
})
.catch(err => this.logout());
}
不确定您是否在案例中发布了完整的代码示例。所以我希望这会有所帮助。在此处查看用法:https://ionicframework.com/docs/api/components/loading/LoadingController/
类似的替代方案,使用 async
和 await
。
async loadProjects() {
// start loader:
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
try {
await loading.present();
this.projs = await this.network.getAllProjects();
}
catch (error) {
//TODO: Log the error, show a friendly message
this.logout();
}
finally {
loading && loading.dismiss();
}
}