获取多个复选框状态作为函数参数

Question

我的复选框代码：

<ion-item>
      <ion-label stacked>Beverage Size</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Small</ion-label>
      <ion-checkbox [(ngModel)]="drinkSmall" color="blue" checked="true"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Regular</ion-label>
      <ion-checkbox [(ngModel)]="drinkRegular" color="blue" checked="true"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Large</ion-label>
      <ion-checkbox [(ngModel)]="drinkLarge" color="blue" checked="true"></ion-checkbox>
    </ion-item>

我的提交按钮：

    <button ion-button color="primary" block (click)="addBeverage(
      drinkName,
      drinkmenuDesc,
      drinkPrice,
      drinkCategory,
      drinkSmall,
      drinkRegular,
      drinkLarge
    )" [disabled]="!menuName">
            Add Beverage
          </button>

编辑:我想将所有复选框状态作为函数的参数传递。drinkSmall、drinkRegular、drinkLarge应该是复选框的状态。

Answer 1

您应该创建一个保存复选框值的对象。然后，可以将该对象传递给提交函数。有关使用称为“复选框”的模型的示例，请参见下文。

TS:

// A achecboxes object in your controller:
    checkboxes: any = {
       drinkSmall: true,
       drinkRegular: true,
       drinkLarge: true
    }

    <ion-item>
      <ion-label stacked>Beverage Size</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Small</ion-label>
      <ion-checkbox [(ngModel)]="checkboxes.drinkSmall" color="blue"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Regular</ion-label>
      <ion-checkbox [(ngModel)]="checkboxes.drinkRegular" color="blue"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Large</ion-label>
      <ion-checkbox [(ngModel)]="checkboxes.drinkLarge" color="blue"></ion-checkbox>
    </ion-item>

    <button ion-button color="primary" block (click)="addBeverage(checkboxes)" [disabled]="!menuName">
            Add Beverage
    </button>

Answer 2

在.ts中，您需要创建一个对象。

  checkboxes: any = {
    drinkSmall: true,
    drinkRegular: true,
    drinkLarge: true
  };

  data: any = {
    checkboxes:this.checkboxes,
    para1:'',
    para2:'',
    para3:''
  };

.html In 您需要像一样进行更改

 <ion-item>
    <ion-label stacked>Beverage Size</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Small</ion-label>
    <ion-checkbox [(ngModel)]="data.checkboxes.drinkSmall" color="blue"></ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label>Regular</ion-label>
    <ion-checkbox [(ngModel)]="data.checkboxes.drinkRegular" color="blue"></ion-checkbox>
  </ion-item>
  <ion-item>
    <ion-label>Large</ion-label>
    <ion-checkbox [(ngModel)]="data.checkboxes.drinkLarge" color="blue"></ion-checkbox>
  </ion-item>

  <button ion-button color="primary" block (click)="addBeverage(data)" [disabled]="!menuName">
    Add Beverage
  </button>

在这里，一个对象数据包含多个checkbox以及para1,para2,para3

console.log的输出

​

​