如何将复选框添加到 ionic 4 alercontroller

Question

我正在使用 ionic 4。希望在警报控制器中有一个复选框字段，该字段从对象数组中获取其数据。 我想将每个数组值设为复选框选项，但使用我的代码我只能得到一个复选框。

这是代码：

 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

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

 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 2

documentation 声明：

警报还可以包含几个不同的输入，它们的数据可以传回应用程序。输入可以用作提示用户输入信息的简单方法。单选、复选框和文本输入都可以接受，但不能混合使用。例如，一个警报可以包含所有单选按钮输入或所有复选框输入，但同一警报不能混合单选按钮和复选框输入。但是请注意，可以混合使用不同类型的“文本”输入，例如 url、电子邮件、文本等。如果您需要不符合警报准则的复杂表单 UI，那么我们建议在其中构建表单代替模态。

他们提到单选按钮和复选框不能混合使用。即使文档没有明确说明文本输入和复选框（或文本输入和单选按钮）不能混合，它们也不能。这就是它的样子。就像文档最后指出的那样，您可以改用模态并将其设置为带有 css 的警报。这就是我们所做的。

或者，您可以像 Ira W 建议的那样破解它：)

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 的变量作为字符串作为占位符来显示它们的去向

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