Ionic2警报与下拉菜单？

Thinker 发表于 Dev

思想家

我正在构建一个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而不是警报？

塞巴费雷拉斯

就像您可以在Ionic2文档中看到的一样

警报还可以包括几个不同的输入，这些输入的数据可以传递回应用程序。输入可以用作提示用户输入信息的简单方法。单选，复选框和文本输入均被接受，但不能混用。例如，警报可以具有所有单选按钮输入或所有复选框输入，但是同一警报不能将单选按钮和复选框输入混在一起。

和...

如果您需要一个复杂的表单UI，而该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');
 }

}