html - 单击时切换图像 src

Question

你好 angular 社区!

我有一个 img，它也是一个按钮，我想更改按钮/img，如下所示“每次单击它时显示 img“arrow_up”，也许 ngClass 会更改 css？

我的按钮是一个向下的箭头，每次他被点击时，我希望它显示一个向上的箭头，而不是像本网站中的那样，例如 Angular Blogspot (如果你看到右边的博客文件，如果你点击它，按钮就会改变..很常见的事情)

我提供了一个 [hidden] 的例子，但也许有一种最优雅的方式来完成这项工作:

html:

<img src="./arrow_down_black.png" type="button"
(click)="toggleChild()"/>
<img [hidden]=""showVar" src="./arrow_up_black.png" type="button"(click)="toggleChild()"/>
   <my-child [showMePartially]="showVar"></my-child>

:

clickMe() {
   this.showVar = !this.showVar;
}

Answer 1

使用表达式显示正确的图像。

<img src="{{ showVar ? './arrow_down_black.png' : './arrow_up_black.png'}}" 
     type="button" (click)="toggleChild()"/>

     <my-child [showMePartially]="showVar"></my-child>

.. 在你的组件 ts 文件中，

toggleChild() {
   this.showVar = !this.showVar;
}