CheckBox 函数调用带有 IONIC 2 的按钮

Question

我正在使用ionic 2. 模拟购物车之类的东西。基本上你写下商品的名称和价值，它会创建一个带有复选框的列表，如下图所示。

但我希望选项 仅在选择其中一个复选框时出现，并且不会像现在那样在屏幕上保持静止。我该怎么做？

网格调用 CheckBox：

<ion-grid>
    <ion-row *ngFor="let item of produto">
      <ion-item>
        <ion-label (click)="clicou(item.desc)">
          {{ item.desc }} {{ item.valor }}
        </ion-label>
        <ion-checkbox checked="false"></ion-checkbox>
      </ion-item>
    </ion-row>
  </ion-grid>

按钮代码部分：

 <button ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
        <span class="button-inner">
          <ion-icon name="close"></ion-icon>
          Remover Selecionados
        </span>
        <div class="button-effect"></div>
      </button>

Answer 1

在 ts 中创建一个包含检查值的变量，作为示例，我将使用 productState 这将是布尔类型，并在 produto 状态下创建。

您可以使用 ngmodel 和已创建的变量 (productState) 来验证产品的状态，并使用事件 (ionchange )到这个

<ion-grid>
<ion-row *ngFor="let item of produto">
  <ion-item>
    <ion-label (click)="clicou(item.desc)">
      {{ item.desc }} {{ item.valor }}
    </ion-label>
    <ion-checkbox (ionChange)="validState()" [(ngModel)]="productState" ></ion-checkbox>
  </ion-item>
</ion-row>

在ts中创建一个函数来验证产品的状态：

validState(){
let cont = 0;
for (let index = 0; index < this.produto.length; index++) {
  if (this.produto[index].State){
    cont++;
  }  
}
if(cont >=1){
  this.productState = true;
}else{
  this.productState = false;
}

}

在按钮中，我们将使用 ngIf 通过 productState

来验证产品状态

<button *ngIf="productState" ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
    <span class="button-inner">
      <ion-icon name="close"></ion-icon>
      Remover Selecionados
    </span>
    <div class="button-effect"></div>
  </button>

ngIf docs
ngmodel docs