Question

我想在警报控制器上为男性和女性放置2个单选按钮。我有这个：

let prompt = this.alertCtrl.create({
  title: 'Add Participant',
  inputs: [
    {
      name: 'name',
      placeholder: 'Name'
    },
    {
      name: 'surname',
      placeholder: 'Surname'
    },
    {
      name: 'radiom',
      type: 'radio',
      label: 'Male',
      value: 'M'
    },
    {
      name: 'radiof',
      type: 'radio',
      label: 'Female',
      value: 'F'
    }
  ],
  buttons: [
    {
      text: 'Cancel',
      handler: data => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Add',
      handler: data => {
        const newParticipant = this.participantsList.push([]);

        newParticipant.set({
          id: newParticipant.key,
          name: data.name,
          surname: data.surname,
          paid: false,
          sex: data.radiom
        });
      }
    }
  ]
});

但它看起来不像我已经看到的东西：我看不到标签'男'和'女'，单选按钮似乎是“老”，我可以选择它们，某些东西完全不同于Ionic文档中的radioalert。此外，我怎样才能将属性'性'中的'M'或'F'的值推到列表中？

Answer 1

遗憾的是，您无法将单选按钮与Ionic AlertController中的文本等其他输入类型混合使用。最简单的解决方案是使用此表单创建模态页面，并将数据从此模式传递回您的页面。我在stackblitz上为你做了一个简单的例子：

https://stackblitz.com/edit/ionic-jum7ch

在您的信息页中：

openAlert(){
 let addModal = this.modalCtrl.create(ParticipantModalPage);
     addModal.onDidDismiss((participant) => {
     if(participant){
     // handle participant date here
     this.participant = participant;
     console.log('data from modal: ', participant);
     }
 });
 addModal.present();
}

在模态页面中：

returnParticipant() {
    let participant = {
    name: this.name,
    surname: this.surname,
    sex: this.sex
    };
    this.view.dismiss(participant);
}

Answer 2

我关注ionic3官方文档，了解如何显示带警告框的单选按钮。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showRadio() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Lightsaber color');

    alert.addInput({
      type: 'radio',
      label: 'Blue',
      value: 'blue',
      checked: true
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        this.testRadioOpen = false;
        this.testRadioResult = data;
      }
    });
    alert.present();
  }
}

此document可帮助您根据自己明智的方式更改样式，并遵循材料设计风格。

带有单选按钮的AlertController

2 个答案: