为什么我不能 return 来自 Ionic/Angular 中模态的数据？

Question

我正在创建一个模态，用户可以在其中通过表单向项目添加数量。这工作得很好，但是我想 return 将服务器中的数据返回到页面中。

问题是无论我做了什么，模态总是 returns {data: {dismissed: true}, role: undefined} 而不是服务器的结果。

我不确定我的问题是我如何 return 从 addItem() 函数获取数据，还是我在关闭 [=] 中的模态时如何获取数据16=]

如何return 将表单模式中的数据输入parent 页面？

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

Answer 1

Modal 应该有一个名为 data 的道具。 return 的响应本身并不意味着它将被下一个 onDidDismiss()。

例如

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

Answer 2

想通了。事实证明，模态必须从返回数据的函数中关闭。这样数据就通过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();
          });
    }
  });
}

现在您要做的就是获取数据

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

为什么我不能 return 来自 Ionic/Angular 中模态的数据？

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

angular

ionic-framework

collections-modal.page.ts

collections.page.ts