Ionic framework 如何在Ionic中向警报添加文本区域和选择

我正在使用Ionic应用程序，我想在警报中显示输入字段，但问题是，我无法在警报控制器中显示文本区域和选择框

这是我的popupdetails.ts文件：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-checkout',
  templateUrl: 'checkout.html',
})
export class CheckoutPage {
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public loadingCtrl: LoadingController, private alertCtrl: AlertController) {
  }

  presentPrompt() {
    let alert = this.alertCtrl.create({
      title: 'Submit Shipping Details',
      inputs: [
        {
          name: 'name',
          placeholder: 'Name'
        },
        {
          name: 'mobilenumber',
          placeholder: 'Mobile Number',
          type: 'number'
        },
        {
          name: 'pincode',
          placeholder: 'Pincode',
          type: 'number'
        },
        {
          name: 'state',
          placeholder: 'State',
        },
        {
          name: 'city',
          placeholder: 'City',
        },
        {
          name: 'address',
          placeholder: 'Address',
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Submit',
          handler: data => {
            console.log('Submit clicked');
          }
        }
      ]
    });
    alert.present();
  }
}

在本例中，我将alert controller用于输入字段，但问题是，我无法在alert controller中显示textarea和select框

这是我当前的输出。

我希望这种类型的输出带有文本区域和选择框。

非常感谢您的帮助。

请查看此链接，希望它能帮助您

名称

移动设备

国家/地区
添加
接近

@ManojBhardwaj。好的，所以对于模式，我必须在爱奥尼亚创建一个不同的页面？是的，你也可以根据自己定制页面我的意思是使用一个模式和ngIf，并使用相同的页面到不同的可重用的页面you@ManojBhardwaj. 你能把答案编码粘贴吗？@ManojBhardwaj。好的，请检查一下，希望能对你有所帮助谢谢你的回答。

<ion-content padding style="background:white">
 <ion-list no-lines>
<form>
<p style="font-weight:bold">Name</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input style="border:1px solid black" type='text'></ion-input>
 </ion-item>

<p style="font-weight:bold">Mobile</p>
  <ion-item>
<ion-label hidden></ion-label>
<ion-input style="border:1px solid black" type='tel'></ion-input>
 </ion-item>
  <p style="font-weight:bold">Country</p>
 <ion-item>
 <ion-label hidden></ion-label>
 <ion-input style="border:1px solid black" readonly="true" type='text'></ion-input>
</ion-item>
</form>
 <ion-grid>
 <ion-row>
 <ion-col>
  <button color="secondary" ion-button float-right>Add</button>
  <button color="light" ion-button float-right>Close</button>
  </ion-col>
 </ion-row>
</ion-grid>

 </ion-list>  
</ion-content>