Question

我正在使用离子4。希望在Alert Controller中具有一个复选框字段，该复选框字段从对象数组获取其数据。我想将每个数组值都设为复选框选项，但是使用我的代码，我只有一个复选框。

这是代码：

 async addPassenger() {
let alert = await this.alertCtrl.create({
  cssClass: "custom-alert",
  header: "Add passenger",
  backdropDismiss: false,
  inputs: [
    {
      name: "name",
      type: "text"
    },
    {
      name: "id",
      type: "number"
    },
    {
      name: "phone",
      type: "number"
    },
    {
      name: "seats",
      value: this.selectedSeats.map(st => st.label)
    },
    {
      name: "seats2",
      type: "checkbox",
      value: this.selectedSeats.map(st => st.label)
    }
  ],
  buttons: [
    {
      text: "Save",
      role: "save",
      cssClass: "btnSave",
      handler: data => {
        console.log("data", data);
        if (
          data.name == "" ||
          data.id == "" ||
          data.phone == "" ||
          data.seats == "" ||
          data.seats2
        ) {
          this.presentToast();
          alert.dismiss();
          return false;
        } else {
          data.name, data.id, data.phone, data.seats, data.seats2;
          try {
            this.passengerInfo = data;
            console.log("Passengers info-->", data);
          } catch (error) {
            console.log("Error: ", error);
          }}}
    },
    {
      text: "Cancel",
      role: "cancel",
      cssClass: "btnCancel",
      handler: () => {
        console.log("data-->");
      }}
  ]
});
alert.present();
}

如何将数组中的标签作为复选框选项。现在，我只有一个未标记的复选框，而不是4。

Answer 1

documentation指出：

警报还可以包括几个不同的输入，这些输入的数据可以传递回应用程序。输入可以用作提示用户输入信息的简单方法。单选框，复选框和文本输入均被接受，但不能混用。例如，警报可以具有所有单选按钮输入或所有复选框输入，但是同一警报不能将单选和复选框输入混合在一起。但是请注意，可以混合使用不同类型的“文本”输入，例如url，电子邮件，文本等。如果您需要的复杂UI不适合警报的准则，则建议您在其中构建表单而是一个模式。

他们提到单选按钮和复选框不能混用。即使文档没有明确指出不能混用文本输入和复选框（或与此相关的文本输入和单选按钮），也不能混用。就是这样。就像最后说明的文档一样，您可以使用模式代替，并使用CSS设置其样式，使其类似于警报。这就是我们所做的。

或者，您可以像Ira W所建议的那样进行破解：）

Answer 2

这很讨厌，但我认为它可以满足您的要求

 let alert = await this.alertCtrl.create({
   cssClass: "custom-alert",
   header: "this is nasty...",
   backdropDismiss: false,
   message:  '<ion-checkbox></ion-checkbox><ion-label style="vertical-align: top;margin-left: 5px;">'+this.selectedSeats[0].label+'</ion-label>',
   buttons: [
     {
       text: "Save",
       role: "save",
       cssClass: "btnSave",
       handler: data => {
         console.log("data", data);
         if (
           data.name == "" ||
           data.id == "" ||
           data.phone == "" ||
           data.seats == "" ||
           data.seats2
         ) {
          // this.presentToast();
           alert.dismiss();
           return false;
         } else {
           data.name, data.id, data.phone, data.seats, data.seats2;
           try {
             this.passengerInfo = data;
             console.log("Passengers info-->", data);
           } catch (error) {
             console.log("Error: ", error);
           }}}
     },
     {
       text: "Cancel",
       role: "cancel",
       cssClass: "btnCancel",
       handler: () => {
         console.log("data-->");
       }}
   ]
 });

为了从复选框中获得验证，可以使用[（ngModel）] =“ someValueInTheTS”

如果需要帮助请发表评论

Answer 3

就像@ AJT82一样，Ionic不支持输入的混合类型。建议采取的措施肯定是为此建立一个单独的模式。

无论如何，我的解决方法也有些混乱，但对我来说效果很好。这个想法是嵌套警报。这是stackblitz中以下代码的有效demo。

this.alertCtrl.create({
cssClass: "custom-alert",
header: "Step 1 - this is not that nasty...",
subHeader: 'Add Passenger',
backdropDismiss: false,
inputs: [{
        name: "name",
        type: "text"
    },
    {
        name: "id",
        type: "number"
    },
    {
        name: "phone",
        type: "number"
    },
    {
        name: "seats",
        value: "this.selectedSeats.map(st => st.label)"
    }
],
buttons: [{
        text: "Next",
        handler: textData => {
            console.log("data", textData);
            if (textData) { //validate data here
                // alert.dismiss(); //As far as I know, practically in ionic 5, there is no need to dismiss, clicking any button does that. But maybe it's the right thing to do ??‍♂️

                this.alertCtrl.create({
                    cssClass: "custom-alert",
                    header: "Step 2 - ok, maybe it is a little nasty...",
                    subHeader: 'Select Seat Passenger',
                    backdropDismiss: false,
                    inputs: [{
                        name: "seats2",
                        type: "checkbox",
                        label: "this.selectedSeats.map(st => st.label)",
                        value: "this.selectedSeats.map(st => st.label)"
                    }],
                    buttons: ['Cancel',
                        {
                            text: 'Save',
                            role: "save",
                            cssClass: "btnSave",
                            handler: (checkboxData) => {
                                console.log('text data:', textData);
                                console.log('checkbox data:', checkboxData);
                                /* Do Main Data processing here */
                            }
                        }
                    ]
                }).then(alert => alert.present());
            } else {
                /*Do something with invalid data */
            }
        }
    },
    {
        text: "Cancel",
        role: "cancel",
        cssClass: "btnCancel",
        handler: () => {
            console.log("data-->");
        }
    }
]}).then(alert => alert.present());

注意：我将OP的变量作为字符串放入占位符中，以显示它们的位置

我希望这可以帮助仍在努力解决此限制的任何人。如有任何疑问，我会尽力回答。 ??

如何在Ionic 4 AlerController中添加复选框

3 个答案: