如何在Ionic 4 AlerController中添加复选框 [英] How to add checkbox to ionic 4 alercontroller

问题描述

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

I am using ionic 4. Wanted to have a checkbox field in Alert Controller that gets its data from array of objects. I want to make each of array value as checkbox option but with the code I have I only get one checkbox.

这是代码:

 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.

推荐答案

文档状态

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

Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as url, email, text, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.

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

They mention that radio buttons and checkboxes cannot be mixed. Even though the documentation doesn't explicitly say that text inputs and checkboxes (or text inputs and radio buttons for that matter) cannot be mixed, they cannot. This is just how it is. Like the documentation lastly states, you can use a modal instead and style it like a alert with css. That is what we have done.

或者，您可以像Ira W建议的那样进行破解:)

Or, you can hack it like Ira W has suggested :)

这篇关于如何在Ionic 4 AlerController中添加复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！