CheckBox函数使用IONIC 2调用按钮

Question

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

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

网格调用复选框：

<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 >将为布尔类型，并在 产品 中创建状态。

您可以使用 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