フォームを使用したモーダルのデータをホームページに転送するにはどうしたらいいですか？

Question

こんにちは、誰も助けることができます。私はイオニックとアングルに慣れています。私はIonic 2で天気予報アプリケーションを作成しようとしています。 AddWeather（）関数を呼び出すClickイベントでホームページを作成しました。 この関数は、フォームが添付されたモーダルを開きます。私はモーダルのフォームからホームページに画面上の出力を渡すことを試みています。私はngModelを試しましたが、正常に動作するようには見えません。 （home.ts）あなたのHTML内

import { Component } from '@angular/core'; 
import { NavController, ModalController, NavParams } from 'ionic-angular'; 
import { AddPage } from '../add/add'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    public weatherList = []; 
    constructor(public navCtrl: NavController, public modalCtrl: ModalController) { 

} 

addWeather() { 
    let addWeatherModal = this.modalCtrl.create(AddPage); 


    addWeatherModal.present(); 
    } 
} 

---

(add.html) 

<ion-header> 
    <ion-navbar color="weatherbru"> 
    <ion-title>Modal</ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="CloseModal()"><ion-icon name="close"></ion-icon></button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <form> 
     <ion-item> 
      <ion-label stacked>City</ion-label> 
      <ion-input type="text" ></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label stacked>Country</ion-label> 
      <ion-select > 
       <ion-option value="us">United States</ion-option> 
       <ion-option value="uk">United Kingdom</ion-option> 
      </ion-select> 
     </ion-item> 
     <button ion-button block (click)="CloseModal()">Add Weather</button> 
    </form> 
<div padding> 
</div> 
</ion-content> 

---

(add.ts) 

import { Component } from '@angular/core'; 
import { ModalController } from 'ionic-angular'; 
import { NavController, NavParams, ViewController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-add', 
    templateUrl: 'add.html' 
}) 
export class AddPage { 

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


CloseModal() { 

    this.viewCtrl.dismiss(); 
} 

} 

Answer 1

：

<form> 
     <ion-item> 
      <ion-label stacked>City</ion-label> 
      <ion-input [(ngModel)]="form.city" type="text" ></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label stacked>Country</ion-label> 
      <ion-select [(ngModel)]="form.country"> 
       <ion-option value="us">United States</ion-option> 
       <ion-option value="uk">United Kingdom</ion-option> 
      </ion-select> 
     </ion-item> 
     <button ion-button block (click)="CloseModal()">Add Weather</button> 
    </form> 

あなたadd.tsファイルでここ

は私のコードです：

あなたのhome.tsで

export class AddPage { 
    form : any; //Declare the form object to be bound to your html 
    constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {} 

CloseModal() { 

    this.viewCtrl.dismiss(this.form); //Send back the form object when closeModal is called 
} 
} 

：

addWeather() { 
    let addWeatherModal = this.modalCtrl.create(AddPage); 

    addWeatherModal.present(); 
    addWeatherModal.onDidDismiss(data=>{ //This is a listener which wil get the data passed from modal when the modal's view controller is dismissed 
     console.log("Data =>", data) //This will log the form entered by user in add modal. 
    }) 
    }