Question

我正在构建一个Ionic2应用程序。我有一个警告如下：

constructor(private platform: Platform, public nav : NavController, 
    public exhibitionSurveyObjectService : ExhibitionSurveyObjectService ) {

    this.initializeMap();
    this.nav=nav;

    this.testArray=[];
    this.area=null;
  }

  addSurveyObject(){

    let prompt = Alert.create({
      title: 'Subscribe to our service',
      message: "All the fields are necessary",
      inputs: [
      {
        name: 'name',
        placeholder: 'Name'
      },
      ....
      {
        name: 'cycle',
        placeholder: 'Cycle: once/weekly/monthly'
      },
      {
        name: 'object_type',
        placeholder: 'Farm/Solarpanel/plain'
      },
      ],
      buttons: [
      ....   
      {
        text: 'Save',
        handler: data => {
          this.createExhibitionSuveyObject(data);
        }
      }
      ]
    });

    this.nav.present(prompt);
  }

  createExhibitionSuveyObject(data: any){

    var cycle = data.cycle;
    cycle = cycle.toUpperCase()
    console.log(cycle)

    var type = data.object_type;
    type = type.toUpperCase()
    console.log(type)

    this.exhibitionSurveyObjectService.addObject(
      data.name, data.farmer_email, 
      data.farmer_name, data.size, data.path, cycle, type).subscribe(

      response => {

        this.exhibitionSurveyObjects = response;
        this.sayThanks();

      },
      error =>  {

        this.errorMessage = <any>error; 
        console.log("error")
      }
      );
    }

    sayThanks(){

      let alert = Alert.create({
        title: 'Thank you!',
        subTitle: 'We have received your data, we will get back to you soon!',
        buttons: [{
          text: 'Ok',
          handler: () => {

            this.nav.push(HomePage)
          }
        }]
      });
      this.nav.present(alert);

    }

我希望最后两个字段是下拉列表。我怎样才能做到这一点？

更新：使用更多代码更新了代码段。如何更新以使用Modal而不是警报？

Answer 1

就像你在Ionic2 docs

中看到的那样

警报还可以包含几个不同的输入，其数据可以是传回应用程序。输入可以用作提示的简单方法用户获取信息。无线电，复选框和文本输入都是接受了，但他们不能混在一起。例如，警报可能有所有单选按钮输入或所有复选框输入，但相同的警报无法混合收音机和复选框输入。

和...

如果您需要一个不适合的复杂表单UI 警报的指导方针，然后我们建议在一个莫代尔。

因此，您必须使用该表单创建新的Component，然后使用它来创建Modal：

import { Modal, NavController, NavParams } from 'ionic-angular';

@Component(...)
class YourPage {

 constructor(nav: NavController) {
   this.nav = nav;
 }

 presentSubscriptionModal() {
   let subscriptionModal = Modal.create(Subscription, { yourParam: paramValue });
   this.nav.present(subscriptionModal);
 }

}

@Component(...)
class Subscription{

 constructor(params: NavParams) {
   let param = params.get('yourParam');
 }

}

Ionic2警报与下拉？

1 个答案: