如何獲取和顯示離子數據？

Question

我是ionic的新手，很難從警報輸入中獲取數據並將其顯示到另一頁。 我正在制作一個顯示警報的按鈕，然后您可以輸入時間（我不知道如何在ionic中使用datetime）和一個隨機數字。 然后顯示所有輸入到另一頁。

的HTML

 <ion-content padding>
 <ion-grid>
  <button ion-button id="id" (click)="sample;" [disabled]="disabled">1</button>
 </ion-grid>
</ion-content>

TS

Ground1(bname:string){

let alert = this.alertCtrl.create({
title: 'Confirm Park',
message: 'Do you want to park this slot?',
inputs: [
  {
    name: 'Time',
    placeholder: 'Input Time', 

  },
  {
    name: 'Code',
    placeholder: 'Random Number'
  },
  {
    name: 'Date',
    placeholder: 'MM/DD/YY'
  }
],

buttons: [
  {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
      console.log('Cancel clicked');

    }
  },
  { 
     text: 'Confirm',
    handler: data => {
             this.buttonColor1 = 'red'
      console.log('Confirm clicked');
      this.disabled = true;
      console.log(JSON.stringify(data));


      this.navCtrl.push(ResultPage, {result:name}, alert);
    }
  }
]
});
alert.present();

Answer 1

您可以從確認處理程序中的字段獲取數據。 您應該能夠將data變量傳遞到下一頁，該變量應該包括data.Time，data.Code和data.Date。

  this.navCtrl.push(ResultPage, {result: data});

在ResultPage上，您可以僅使用navParams（ http://ionicframework.com/docs/api/navigation/NavParams/ ）來檢索您傳遞的結果數據。

result = this.navParams.get('result');

Answer 2

警報還可以包括收音機，復選框和文本輸入，但不能混在一起。 此外， 您不能在其中使用日期時間選擇器 。

但是請注意，可以混合使用不同類型的“文本”輸入，例如url，電子郵件，文本等。如果需要復雜的表單UI，該UI不適合警報的准則。

如果要使用其他輸入（例如datetime或html輸入），建議您必須在模式中創建表單 。

datetime.html

<ion-header>
  <ion-navbar>
    <ion-title>DateTime</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-item>
      <ion-label>Full Date</ion-label>
      <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2100" [(ngModel)]="myFullDAte"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label>Time</ion-label>
      <ion-datetime displayFormat="hh:mm A" [(ngModel)]="myTime"></ion-datetime>
    </ion-item>

  </ion-list>

</ion-content>

ts文件

import { ModalController, NavParams } from 'ionic-angular';

@Component(...)
class MyPage {

 constructor(public modalCtrl: ModalController) { }

 presentModal() {
   let myModal = this.modalCtrl.create(Datetime);
   profileModal.present();
 }

}