How can i implement a switching image back and forth using if else statement?

问题

Hi everyone i wan't to switch building layout image to building design image back and forth using if else statement but i don't know how to implement it. I'am new in this type script, anybody would love to share an answer?

Thank you for your answers in advanced

回答1:

here is an example-component to switch a image by a action:

HTML of component:

---

<ion-list>
      <ion-item *ngIf="showImage1">
          <img src="../assets/imgs/dots.gif" height="50px" width="50px" >
     </ion-item>
      <ion-item *ngIf="showImage2">
          <img src="../assets/imgs/dots.gif" height="50px" width="50px" >
     </ion-item>
</ion-list>
<ion-button (click)="DoHideImage1()"  expand="block" color="light">
  Image2
</ion-button>
<ion-button (click)="DoHideImage2()"  expand="block" color="light">
  Image1
</ion-button>

Typescript of component:
________________________________________

public showImage1: boolean;
public showImage2: boolean;

constructor() {
  this.showImage1 = true;
  this.showImage2 = false;
}

DoHideImage1(){  
      this.showImage1 = false;
      this.showImage2 = true;
 };
DoHideImage2(){  
      this.showImage1 = true;
      this.showImage2 = false;
 };

The *ngIf hides on condition ! Modify the example for your needs!

来源：https://stackoverflow.com/questions/58282058/how-can-i-implement-a-switching-image-back-and-forth-using-if-else-statement