Question

我是离子新用户，很难从警报输入中获取数据并将其显示到另一个页面。我正在制作一个显示警报的按钮，然后您可以输入时间（我不知道如何在离子中使用日期时间）和随机数字。然后显示另一页的所有输入。

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

警报还可以包括无线电，复选框和文本输入，但不能混合使用。此外，您无法使用日期时间选择器。

请注意，不同类型的“文本”输入可以混合使用，例如网址，电子邮件，文本等。如果您需要一个不符合警报准则的复杂表单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();
 }

}

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

2 个答案: