Hide Buttons

-2

I wanted a help with angular, I use an ngFor to generate the "-" and "+" buttons which are the buttons that give the user a choice. It was time to choose the options such as the taste of the pizza wanted that when it clicked on some flavor that "+" button disappeared .. understand?

<ion-list *ngIf="varia.eMax > 1">
<ng-container *ngFor="let item of itensVaria">
    <ion-item class="compact" *ngIf="item.idPV == varia.idPV">
      <ion-row no-padding>
        <ion-col col-7 style="text-align: left;">
          <h2 class="h2">Descrião do item</h2>

        </ion-col>

        <ion-col col-5>
          <button ion-button icon-only clear color="danger" (click)="changeQty(item, varia, -1)">
            <ion-icon name="remove-circle"></ion-icon>
          </button>

          <!-- <button ion-button clear color="danger"> qtd do item </button> -->

          <button ion-button icon-only clear color="danger" (click)="changeQty(item, varia, 1)">
            <ion-icon name="add-circle"></ion-icon>
          </button>
        </ion-col>
      </ion-row>

    </ion-item>
</ng-container>

But as there are several flavors and the user can choose only at most 3 and at least 2 for example I wanted to click on the flavor x the button for this flavor was unavailable indicating that it already clicked on this flavor! >     

asked by anonymous 28.07.2018 / 19:18

1 answer

0

You might have a variable with the added flavors:

saboresAdicionados = [];

And put in the button a disabled calling a flavored method (item)

<button ion-button [disabled]="saborJaAdicionado(item)" icon-only clear color="danger" (click)="changeQty(item, varia, 1)">
 <ion-icon name="add-circle"></ion-icon>
</button>

The method could be as follows:

saborJaAdicionado(item){
    let achouItem = false;
    this.saboresAdicionados.foreach(e => { 
       if (e === item) achouItem = true;
    }
    return achouItem;
}

This way for each item it will test if the taste is already added and will release / block the taste.

    
28.07.2018 / 19:35