Ionic ion-alert did not get value before showing message - asynchronous

Question

I'm trying to show some message through ion-alert after getting data by getTask(taskId).
But seems it shows alert dialogue before data returned, so this.item in message shows undefined.
How can I make sure data returned before showing alert dialogue?
list.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)
})
}
})
});
}

Answer 1

Try it:
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();
}
Or You can also try It
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);
});
}