Angular中根据状态双向切换图片按钮的实现问题

你的问题核心在于每次点击都直接固定赋值picToView为first.png，没有根据status的实际状态动态调整图片路径，所以第二次点击时status虽然翻转回false，但图片路径没跟着变，导致无法切回初始图。这里有两种简洁的解决方式：

方案一：模板内直接用三元表达式（推荐，更简洁） #

不需要额外维护picToView变量，直接在模板里根据status的值绑定图片路径：

<img class="sig" 
     [src]="status ? 'assets/imgs/first.png' : 'assets/imgs/second.png'" 
     (click)="hand($event)" 
     alt="Toggle Image">

对应的TS代码只需要负责翻转status即可：

// 初始化状态为false，对应显示初始图片second.png
status = false;

hand(event) {
  this.status = !this.status;
}

每次点击按钮时，status会翻转，模板会自动根据status的真假切换显示对应的图片。

方案二：通过TS逻辑控制picToView变量 #

如果你更倾向于在TS里管理图片路径，可以修改hand方法，根据status的新值动态设置picToView：

首先初始化变量：

status = false;
// 初始状态对应显示second.png
picToView = 'assets/imgs/second.png';

hand(event) {
  // 先翻转状态
  this.status = !this.status;
  // 根据新的状态值设置图片路径
  this.picToView = this.status ? 'assets/imgs/first.png' : 'assets/imgs/second.png';
}

HTML保持你原来的写法即可：

<img class="sig" [src]="picToView" (click)="hand($event)" alt="Toggle Image">

这样每次点击时，status翻转后，picToView会根据新的状态值更新，图片也就跟着切换了。

内容的提问来源于stack exchange，提问作者EyTa