Как получить модальные данные о модальном отклонении в Ionic 3?

Question

У меня есть страница со списком.С этой страницы я открываю МОДАЛЬ.Этот модал содержит текстовое поле и кнопку добавления элемента.Когда я ввожу предмет в коробку и нажимаю кнопку «Добавить предмет», мне нужно 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

Ваш код в целом выглядит нормально.

Измените эту часть.

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

Попробуйте.Я помогу тебе дальше, если он все еще не работает.

Answer 2

Сначала вам нужно передать объект / строку элемента / данных из вашего режима, пока вы закрываете тот же

this.viewCtrl.dismiss(data);

И вы должны подписаться на событие закрытия модели на странице, с которой вы ее открыли.например,

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

После того, как вы можете просто вставить новый элемент в массив элементов:)