如何获取和显示离子数据？

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

}