在状态条件下在两个图像之间切换

Question

我有一个image（button），我想在状态为false时切换图像。当状态为true时，我有一个初始图像。我想拥有另一个。

html文件

<img class="sig"  [src]="picToView" (click)="hand($event)" src="assets/imgs/second.png">

ts文件

  hand(event){
      this.status = !this.status
      this.picToView="assets/imgs/first.png"
  }

在我单击的那一刻，图像发生了变化，当我再次单击时，我没有得到初始的图像。 我想我需要将图像的变化与状态联系起来

有办法吗？

Answer 1

您可以执行以下操作：

hand(event){
      this.status = !this.status
      if(this.status === false) {
        this.picToView="assets/imgs/first.png" // URL of image to be rendered when status is false
      } else {
        this.picToView="assets/imgs/original.png" // URL of image to be rendered when status is true
      }
  }

Answer 2

您可以这样做：

hand(event) {
    this.status = !this.status
    this.picToView = `assets/imgs/${this.status ? "first" : "second"}.png`
}