asynchronous - Ionic ion-alert 在显示消息之前没有获得价值
问题描述
在获取数据后,我试图通过 ion-alert 显示一些消息getTask(taskId)
。但似乎它在数据返回之前显示警报对话,所以this.item
在message
显示undefined
。
如何确保在显示警报对话框之前返回数据?
列表.page.ts
items: Array<any>;
item: any;
constructor(
public loadingCtrl: LoadingController,
private authService: AuthService,
private router: Router,
private route: ActivatedRoute,
private firebaseService: FirebaseService,
private alertCtrl: AlertController,
) { }
async delete(clickedItem: any) {
let itemId = clickedItem.payload.doc.id;
this.firebaseService.getTask(itemId)
.then(data => {
this.item = data;
}, err => {
console.log(err);
});
const alert = await this.alertCtrl.create({
header: 'Confirm',
// this.item is undefined here
message: 'Do you want to delete ' + this.item.title + '?',
buttons: [
{
text: 'No',
role: 'cancel',
cssClass: 'secondary',
handler: () => {}
},
{
text: 'Yes',
handler: () => {
this.firebaseService.deleteTask(itemId)
.then(
res => {
this.router.navigate(["/list"]);
},
err => console.log(err)
)
}
}
]
});
await alert.present();
}
firebase.service.ts
getTask(taskId){
return new Promise<any>((resolve, reject) => {
this.afAuth.user.subscribe(currentUser => {
if(currentUser){
this.snapshotChangesSubscription = this.afs.doc<any>('people/' + currentUser.uid + '/tasks/' + taskId).valueChanges()
.subscribe(snapshots => {
resolve(snapshots);
}, err => {
reject(err)
})
}
})
});
}
解决方案
尝试一下:
async delete(clickedItem: any) {
let itemId = await clickedItem.payload.doc.id;
await this.firebaseService.getTask(itemId)
.then(data => {
this.item = data;
}, err => {
console.log(err);
});
const alert = await this.alertCtrl.create({
header: 'Confirm',
// this.item is undefined here
message: 'Do you want to delete ' + this.item.title + '?',
buttons: [
{
text: 'No',
role: 'cancel',
cssClass: 'secondary',
handler: () => {}
},
{
text: 'Yes',
handler: () => {
this.firebaseService.deleteTask(itemId)
.then(
res => {
this.router.navigate(["/list"]);
},
err => console.log(err)
)
}
}
]
});
await alert.present();
}
或者你也可以试试
async delete(clickedItem: any) {
let itemId = await clickedItem.payload.doc.id;
this.firebaseService.getTask(itemId)
.then(async data => {
this.item = data;
const alert = await this.alertCtrl.create({
header: 'Confirm',
// this.item is undefined here
message: 'Do you want to delete ' + this.item.title + '?',
buttons: [
{
text: 'No',
role: 'cancel',
cssClass: 'secondary',
handler: () => {}
},
{
text: 'Yes',
handler: () => {
this.firebaseService.deleteTask(itemId)
.then(
res => {
this.router.navigate(["/list"]);
},
err => console.log(err)
)
}
}
]
});
await alert.present();
}, err => {
console.log(err);
});
}
推荐阅读
- javascript - NodeJS事件模块关于记录事件模块的基本问题
- flutter - 如何将两个列表合并为一个具有特定顺序的列表?
- graphql - Apollo 缓存本地过滤器和分页
- javascript - 反应路由器dom v5默认路由不起作用
- php - CURL 警告:curl_file_create() 期望参数 1 是有效路径,给定字符串
- spring-boot - 使用 springboot 2.3.3 和 axon 4.4.2 实现轴突快照
- python - 无法访问我在类内的嵌套函数
- mongodb - 为什么评论即使成功保存在数据库中也没有显示?
- c - 找到连接灯泡代码的最少电线数量
- arrays - 如何在Scala中手动对数组进行排序?