為什么我不能從Ionic/Angular中的模式回傳資料？

我正在創建一個模式，用戶可以在其中通過表單向專案添加數量。這作業得很好，但是我想將服務器中的資料回傳到頁面中。

問題是無論我做了什么，模態總是回傳{data: {dismissed: true}, role: undefined}而不是服務器的結果。

我不確定我的問題是否在于我如何從addItem()函式回傳資料，或者我在解除內部模式時如何獲取它presentAddItemsModal()

如何將表單模式中的資料回傳到父頁面？

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

uj5u.com熱心網友回復：

模態應該有一個名為data. 回應本身的回傳并不意味著它將被 nexted 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 => {});
    }
  });
}

uj5u.com熱心網友回復：

弄清楚了。原來模態必須從回傳資料的函式中關閉。這樣資料通過 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();
}

標籤：有角度的 离子框架

上一篇：如何為整個應用程式撰寫一次離子警報組件？

下一篇：訂單及其狀態機的設計實作