Why can't I return data from a modal in Ionic/Angular?-CodePudding

I'm creating a modal in which a user can add a quantity to an item through a form. This is working just fine, however I'd like to return the data from the server back into the page.

The problem is that no matter what I've done, the modal always returns {data: {dismissed: true}, role: undefined} instead of the result from the server.

I'm not sure if my problem is in how I'm returning the data from the addItem() function, or how I'm getting it when dismissing the modal inside presentAddItemsModal()

How can I return the data from the form modal into the parent page?

collections-modal.page.ts

async addItem(formData: any) {
  await this.loading.present();
  await this.storage.get('token').then(token => {
    if (token) {
      this.formdata = formData;
      const body = new FormData();
      body.append('api_token', token);
      body.append('collection_id', this.collectionId);
      body.append('item_id', this.itemId);
      body.append('quantity', this.formdata.quantity);
      this.http
        .post(this.api.url, body)
        .subscribe(response => {
            this.loading.dismiss();
            return response;
          },
          error => {});
    }
  });
}

collections.page.ts

async presentAddItemsModal(collection: any, item: any) {
  const modal = await this.modalCtrl.create({
    component: AddItemsPage,
    componentProps: {
      collectionId: collection.id,
      itemId: item.id,
      itemName: item.name,
      itemQuantity: item.collected_quantity,
    }
  });

  await modal.present();

  await modal.onDidDismiss().then((data) => {
    this.slidingItem.closeOpened();
    console.log(data); // always returns {dismissed: true}
  });
}

CodePudding user response：

Modal should have a prop named data. A return of response itself doesn't mean it will be nexted onDidDismiss().

E.g

data: any;

async addItem(formData: any) {
  await this.loading.present();
  await this.storage.get('token').then(token => {
    if (token) {
      this.formdata = formData;
      const body = new FormData();
      body.append('api_token', token);
      body.append('collection_id', this.collectionId);
      body.append('item_id', this.itemId);
      body.append('quantity', this.formdata.quantity);
      this.http
        .post(this.api.url, body)
        .subscribe(response => {
            this.data = response; // <---
            this.loading.dismiss();
            return response;
          },
          error => {});
    }
  });
}

CodePudding user response：

Figured it out. Turns out the modal has to be closed from within the function that's returning the data. This way the data is passed through the ModalController.

async addItem(formData: any) {
  await this.loading.present();
  await this.storage.get('token').then(token => {
    if (token) {
      this.formdata = formData;
      const body = new FormData();
      body.append('api_token', token);
      body.append('collection_id', this.collectionId);
      body.append('item_id', this.itemId);
      body.append('quantity', this.formdata.quantity);
      this.http
        .post(this.api.url, body)
        .subscribe(response => {
            this.loading.dismiss();

            // close the modal here and the data will be returned
            this.modalCtrl.dismiss(response);
          },
          error => {
            this.loading.dismiss();
            this.toast.oops();
          });
    }
  });
}

Now all you have to do is get the data

async presentAddItemsModal(collection: any, item: any) {
  const modal = await this.modalCtrl.create({
    component: AddItemsPage,
    componentProps: {
      collectionId: collection.id,
      itemId: item.id,
      itemName: item.name,
      itemQuantity: item.collected_quantity,
    }
  });

  modal.onDidDismiss().then((data) => {
    if (data !== null) {
      const modelData = data.data;
      this.slidingItem.closeOpened();
      item.collected_quantity = modelData.data.item_quantity;
    }
  });

  await modal.present();
}