ionic-framework - 带有下拉菜单的 Ionic2 警报？

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

    }

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

更新:用更多代码更新了代码片段。如何更新它以使用模式而不是警报？

Answer 1

就像你在Ionic2 docs中看到的一样

Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs.

还有……

If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.

因此，您必须使用该表单创建一个新的 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');
 }

}