单击单个按钮时如何隐藏 2 个离子按钮？

Question

我正在使用 2 个 ionic fab 按钮，一个用于批准用户的详细信息，另一个用于拒绝它。我正在使用这两个按钮，如下所示：

  <ion-fab right   #fab>
    <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="approve()" >
          <ion-icon style="color:#006400" name="checkmark"></ion-icon>
    </button>
 </ion-fab>
 <ion-col col-2 *ngIf = "false">
      <ion-fab right   #fab>
          <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="reject()" >
                <ion-icon style="color:red" name="close"></ion-icon>
           </button>
       </ion-fab>
 </ion-col>

在我的 TS 文件中，这两种方法：

approve(){
    this.message.alert("Congrats! Your account has been approved")
}
reject(){
    this.message.alert("Sorry your account has not been approved")
}

即使我点击其中一个按钮，如何隐藏两个按钮？即，即使我也单击批准按钮，这两个按钮都应该被隐藏，或者即使我也单击取消按钮，这两个按钮都应该被隐藏。我怎样才能实现它？

Answer 1

这样试试

<ion-fab right   #fab>

    <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="Approve()" >
          <ion-icon style="color:#006400" name="checkmark"></ion-icon>
    </button>
 </ion-fab>
 <ion-col col-2 *ngIf = "false">
      <ion-fab right   #fab>

          <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="Reject()" >
                <ion-icon style="color:red" name="close"></ion-icon>
           </button>
       </ion-fab>
 </ion-col>

在您的 .ts 文件中

hideButton:boolean = true;

approve(){
  if(this.hideButton){
      this.hideButton = false;
  }
    this.message.alert("Congrats! Your account has been approved")
  }
cancel(){
   if(this.hideButton){
       this.hideButton = false;
   }
   this.message.alert("Sorry your account has not been approved")
 }

注意：请添加您的业务逻辑以使按钮可见。

单击单个按钮时如何隐藏 2 个离子按钮？

How can I hide the 2 ionic button when a single button is clicked?

mobile

android

hybrid-mobile-app

ionic3

angular6