如何隐藏但不禁用按钮？与“ [隐藏] =“隐藏按钮[item.product_id]”

Question

[hidden]="hidebutton[item.product_id]"，使用此方法可以隐藏任何按钮，但不能使按钮无法工作。 我试图根据产品ID隐藏按钮，其中离子选择栏中有多个数量。根据通过离子选择选择的产品数量添加产品。

这是我的代码：

<ion-row style="background-color: transparent;" >
   <ion-col col-6   *ngFor="let item of categoriess2; let i = index"  class="col-padding" >
      <div class="box-1"  *ngIf="item.offer_status==1">
         <div class="title">{{item.offer_percent}} %, <br>off</div>
      </div>
      <div class="box effect2">
         <div >
            <div (click)="productdes(item)"   text-center  style="background-color:lightgray;" *ngIf="item.product_stock==0">
            <div text-center><img   src="https://www.ramrajservices.com/{{item.image_url}}" style="height: 150px; width: auto; padding: 5px 5px 0px 5px;"  /></div>
            <p class="centered">out of stock</p>
         </div>
         <div (click)="productdes(item)" text-center  *ngIf="item.product_stock!=0" >
         <img   [defaultImage]="'assets/imgs/default_image.jpg'"    lazyLoad="https://www.ramrajservices.com/{{item.image_url}}"      [scrollObservable]="container.ionScroll"   style="height: 150px; width: auto; padding: 5px 5px 0px 5px;"  />
      </div>
      <div (click)="productdes(item)" class="title4">{{item.product_name}}   </div>
      <ion-item no-lines >
         <ion-select [(ngModel)]="pro"  (ngModelChange)="Getprice(pro,item,i)" placeholder="{{item.prices[0]['unit_quantity']}} {{item.prices[0]['unit']}} - Rs. {{item.prices[0]['franchise_unit_price']}}" style='min-width: 100%;' interface="popover">
         <ion-option *ngFor="let item11 of item.prices; let idx = index" 
         [value]="{'product_id': item11.product_id, 'unit':item11.unit, 'unit_mrp':item11.unit_mrp, 'unit_price':item11.franchise_unit_price,'unit_quantity':item11.unit_quantity,'product_price_id': item11.product_price_id}" 
         [selected]="idx == 0">{{item11.unit_quantity}} {{item11.unit}} - Rs. {{item11.franchise_unit_price}}</ion-option>
         </ion-select>
      </ion-item>
      <div class="product_price"><span class="span">Mrp:- {{item.prices[0]['unit_mrp']}}</span>,  Sale Price:- {{item.prices[0]['franchise_unit_price']}} </div>
      <!-- <ion-item no-lines>
         <ion-select [(ngModel)]="pro"  (ngModelChange)="Getprice(pro,i)" placeholder="{{item.prices[0]['unit_quantity']}} {{item.prices[0]['unit']}} - Rs. {{item.prices[0]['unit_price']}}" style='min-width: 70%;' interface="popover">
           <ion-option *ngFor="let item11 of item.prices; let idx = index" 
           [value]="{'product_id': item11.product_id, 'unit':item11.unit, 'unit_mrp':item11.unit_mrp, 'unit_price':item11.unit_price,'unit_quantity':item11.unit_quantity,'product_price_id': item11.product_price_id}" 
           [selected]="idx == 0">{{item11.unit_quantity}} {{item11.unit}} - Rs. {{item11.unit_price}}</ion-option>
         </ion-select>
         </ion-item> -->
      <!-- <button ion-button  style="width: 80px;background: #38ef7d;
         background: -webkit-linear-gradient(to right, #11998e, #51aa1b);
         background: linear-gradient(to right, #11998e, #51aa1b);margin-top: 5px;"   (click)="addtocart(item)">Add</button> -->
      <div *ngIf="item['product_cart_check'][0]['product_quantity']==0">
         <button ion-button   class="add_btn"      [hidden]="hidebutton[item.product_id]"    id="demoo{{i}}"    (click)="addtocart(item,1)">Add1</button>
      </div>
      <button ion-button   class="add_btn"      [hidden]="!select_add_btn[item.product_id]"        id="demoo{{i}}"  (click)="addtocartForselect(item,1)">Add2</button>
      <div *ngIf="item['product_cart_check'][0]['product_quantity']!=0"      >
         <ion-row [hidden]="allbutton[item.product_id]" >
            3
            <ion-col class="addrem" (click)="SaveTOcart(item,1,i)">
               <ion-icon class="icos" name="add-circle"></ion-icon>
            </ion-col>
            <ion-col style="align-self: center;" class="addqty"><strong>{{item['product_cart_check'][0]['product_quantity']}}</strong></ion-col>
            <ion-col class="addrem" (click)="SaveTOcart(item,-1,i)">
               <ion-icon class="icos" name="remove-circle"></ion-icon>
            </ion-col>
         </ion-row>
      </div>
      <ion-row [hidden]="!checkbutton[item.product_id]" >
         4
         <ion-col class="addrem" (click)="SaveTOcartForSelectAll(item,1,i)">
            <ion-icon class="icos" name="add-circle"></ion-icon>
         </ion-col>
         <ion-col style="align-self: center;" class="addqty">
            <strong >{{this.select_prod_quantity}}</strong>
         </ion-col>
         <ion-col class="addrem" (click)="SaveTOcartForSelectAll(item,-1,i)">
            <ion-icon class="icos" name="remove-circle"></ion-icon>
         </ion-col>
      </ion-row>
      <!-- <div *ngIf="this.product_price_id!=null">
         <ion-row *ngIf="item['product_cart_check'][0]['product_quantity']!=0&&item['product_cart_check']['p_price_id']?.length == this.product_price_id " >
           <ion-col class="addrem" (click)="SaveTOcart(item,1,i)">
             <ion-icon class="icos" name="add-circle"></ion-icon>
           </ion-col>
           <ion-col style="align-self: center;" class="addqty"><strong>{{item['product_cart_check'][0]['product_quantity']}}</strong></ion-col>
           <ion-col class="addrem" (click)="SaveTOcart(item,-1)">
             <ion-icon class="icos" name="remove-circle"></ion-icon>
           </ion-col>
         </ion-row>
          </div> -->
      </div>
      </div>
   </ion-col>
</ion-row>