2016-07-25 30 views
2

我正在构建一个Ionic2应用程序。我有一个像下面的一个警告:带下拉的Ionic2警报?

enter image description here

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

    } 

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

UPDATE:更新了代码片段,并增加了一些代码。如何更新以使用Modal而不是alert?

回答

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

} 
+1

所以我完全删除警报,而是使用模态?我正在用更多的代码更新代码片段。 – Nitish

+0

@Nitish是的,Alertboxes是非常快速的提示..即使你需要2个文本域我肯定会去一个更好的用户界面模式! – EralpB

+1

谢谢!我这样实现它! – Nitish