Ionic ion-alert did not get value before showing message

manpreet Best Answer 3 years ago

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;
  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((resolve, reject) => {
      this.afAuth.user.subscribe(currentUser => {
        if(currentUser){
          this.snapshotChangesSubscription = this.afs.doc('people/' + currentUser.uid + '/tasks/' + taskId).valueChanges()
          .subscribe(snapshots => {
            resolve(snapshots);
          }, err => {
            reject(err)
          })
        }
      })
    });
  }

manpreet 3 years ago

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);
                });

      }