Ionic 2 添加单选按钮到警报控制器答案

【问题标题】：Ionic 2 Add radio buttons to alert controllerIonic 2 添加单选按钮到警报控制器
【发布时间】：2021-05-24 01:38:09
【问题描述】：

如何在 ionic 2 的警报控制器中添加单选按钮作为输入按钮？它适用于复选框，但我想添加带有单选按钮的单选按钮组以仅选择一个选项。

  advanceSearch(): void{
   let prompt = this.alertCtrl.create({
    title: 'something',
    message: 'Select option ',
    inputs : [
     {
       type:'checkbox',
       label:'something1'
     },
     {
       type:'checkbox',
       label:'something2'
      }

    ],
    buttons : [
     {
       text: "Cancel",
       handler: data => {
         console.log("cancel clicked");
       }
     },
     {
       text: "Search",
       handler: data => {
         console.log("search clicked");
       }
     }
    ]
    });
    prompt.present();
}

我想将这些复选框更改为单选框。

【问题讨论】：

欢迎来到 SO。你已经尝试过什么？请用一些最少的数据分享代码，并解释可能的问题、错误......
谢谢@KoenV。我用我的代码编辑了问题。

标签： ionic2 radio-button

【解决方案1】：

试试这个。

advanceSearch(): void
{
    let prompt = this.alertCtrl.create({
    title: 'something',
    message: 'Select option ',
    inputs : [
    {
        type:'radio',
        label:'something1',
        value:'something1'
    },
    {
        type:'radio',
        label:'something2',
        value:'something2'
    }],
    buttons : [
    {
        text: "Cancel",
        handler: data => {
        console.log("cancel clicked");
        }
    },
    {
        text: "Search",
        handler: data => {
        console.log("search clicked");
        }
    }]});
    prompt.present();
}

【讨论】：

谢谢@Dinuka
是否可以将布尔值设置为按钮的值

【解决方案2】：

请注意，AlertController.create 方法会返回 Promise<HTMLIonAlertElement>，因此您必须使用 async / await 创建它：

async advanceSearch(): void
{
  let prompt = await this.alertCtrl.create({
    title: 'something',
    message: 'Select option ',
    inputs : [
    {
        type:'radio',
        label:'something1',
        value:'something1'
    },
    {
        type:'radio',
        label:'something2',
        value:'something2'
    }],
    buttons : [
    {
        text: "Cancel",
        handler: data => {
        console.log("cancel clicked");
        }
    },
    {
        text: "Search",
        handler: data => {
        console.log("search clicked");
        }
    }]});

   await prompt.present();
}

【讨论】：