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

Question

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

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

首页

.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>

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

莫代尔

.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>

模 态。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 文件中变量的名称。namenewItem，反之亦然

您正在使用[(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();

之后，您只需将新项目推入项目数组:)