如何在 Ionic 3 中获取模态关闭的模态数据？答案

【问题标题】：How to get modal data on modal dismiss in Ionic 3?如何在 Ionic 3 中获取模态关闭的模态数据？
【发布时间】：2018-10-10 10:23:31
【问题描述】：

我有一个带有列表的页面。从那个页面我打开一个模式。该模式包含一个文本框和一个添加项目按钮。当我在框中输入一个项目并点击添加项目时，我需要 1）关闭模态 2) 将输入的Item添加到Previous List中的List中

我需要通过 On Dismiss() 执行此操作。

HOME.HTML

    <ion-header>
    <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let grocery of itemsArray">{{grocery}}</ion-item>
  </ion-list>
  <button ion-button round (click)="addItem()">Add Item</button>
</ion-content>

HOME.TS

    export class HomePage {

  public itemsArray = [];
  newItem: String;
  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    this.newItem = this.navParams.get('data');
    this.itemsArray = [
      'Bread',
      'Milk',
      'Cheese',
      'Snacks',
      'Apples',
      'Bananas',
      'Peanut Butter',
      'Chocolate',
      'Avocada',
      'Vegemite',
      'Muffins',
      'Paper towels'
    ];
    this.itemsArray.push(this.newItem)

  }
  public addItem() {
    let modalPage = this.modalCtrl.create(ModalPage);
    modalPage.onDidDismiss(data => {
      this.newItem = data;
    });
    modalPage.present();
  }
}

MODAL.HTML

    <ion-header>
  <ion-navbar>
    <ion-title>Add Item</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input type="text" [(ngModel)]="newItem"></ion-input>
    </ion-item>
    <button ion-button color="secondary" (click)="add()">Add Item</button>
  </ion-list>
</ion-content>

MODAL.TS

    export class ModalPage {
  name:any;

  constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) {

  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
  }
  public closeModal() {
    this.viewCtrl.dismiss();

  }
  add() {
    let data = {"name": this.name};
    this.viewCtrl.dismiss(data)
  }

}

【问题讨论】：

告诉我们你尝试了什么。调用模态的页面和模态页面本身。
@SimãoGarcia 很抱歉没有提供正确的代码。我现在已经编辑过了。提前致谢。
好东西@Shylesh。希望您的问题得到解决。
@SimãoGarcia 没有。我仍然没有得到列表中的数据！你能帮忙写代码吗？

标签： ionic-framework ionic3

【解决方案1】：

您的代码总体上看起来不错。

更改这部分。

public addItem() {
    let modalPage = this.modalCtrl.create(ModalPage);
    modalPage.onDidDismiss(data => {
      this.itemsArray.push(data);
    });
    modalPage.present();
  }

在 html 或 TS 文件上更改变量的名称。 name 到 newItem 或反之亦然

您正在使用 [(ngModel)]="newItem"，但在您的 TS 文件中您使用的是 this.name

您在 ionViewDidLoad() 添加项目，但新项目到达 modalPage.onDidDismiss()

试一试。如果还是不行，我会再帮你。

【讨论】：

尝试一下并提供一些反馈。如果您希望其他人帮助您，您必须取消将其他答案标记为已接受。人们会认为你的问题已经解决了。
这行得通。必须在代码中暗示这一点才能将项目添加到列表中 this.itemsArray.push(data.name);

【解决方案2】：

首先，您需要在关闭同一模式时从您的模式中传递项目/数据的对象/字符串

this.viewCtrl.dismiss(data);

并且您必须在您打开它的页面上订阅模型关闭事件。

let modal = this.modalCtrl.create(ModelPage);
modal.onDidDismiss(data => {
    this.badge = data;
});
modal.present();

在您可以简单地将新项目推入项目数组之后:)

【讨论】：

看不下去了..我已经编辑了代码并上传了..你能检查一下有什么问题吗？？