Как я могу скрыть 2 ионные кнопки, когда нажата одна кнопка? - PullRequest
Новая
       23

Как я могу скрыть 2 ионные кнопки, когда нажата одна кнопка?

0 голосов
/ 14 ноября 2018

Я использую 2 ионные кнопки, одна для подтверждения данных пользователя, а другая для отклонения. Я использую обе кнопки, как показано ниже: 

  <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")
}

Как я могу скрыть обе кнопки, даже если я нажму любую из кнопок? Т.е., даже если я также нажму кнопку подтверждения, обе кнопки должны быть скрыты, или даже если я нажму кнопку отмены, обе кнопки должны быть скрыты. Как мне этого добиться?

1 Ответ

0 голосов
/ 14 ноября 2018

Попробуйте вот так 

<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")
 }

Примечание: пожалуйста, добавьте свою бизнес-логику, чтобы сделать кнопку видимой.

...