Question

我有一个图像（按钮），我想在状态为假时切换图像我有一个初始状态，当状态为真我想要另一个。

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`
}

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

2 个答案: