Question

我有一个带有列表的页面。在该页面上，我打开一个MODAL。该模式包含一个文本框和一个添加项按钮。当我在框中输入项目并点击添加项目时，我需要 1）取消模态 2）将输入的项目添加到上一个列表的列表中

我需要通过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)
  }

}

Answer 1

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

this.viewCtrl.dismiss(data);

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

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

您可以简单地将新项目推送到项目数组中：）

Answer 2

您的代码总体看来还不错。

更改此部分。

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

尝试一下。如果仍然无法解决，我会进一步帮助您。

如何在Ionic 3中获取模态消除的模态数据？

2 个答案: