点击切换图像src

我有一个img谁也是一个按钮，一个我想arrow_up‘“会在每次点击节目IMG时间’更改按钮/ IMG如下，也许ngClass改变CSS？

我的按钮一个箭头向下，每次他点击我想它显示一个箭头，而不是像在这个网站上，例如Angular Blogspot（如果你看到博客档案在右边，如果你点击它，boutton改变..很平常的事情）

我提供了一个[隐藏]的例子，但也许有一个elegantest方式做这项工作：

htm L：

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

TS：

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

来源

2017-08-10 Emile Cantero

你的描述是不明确的。你究竟想实现什么？ – Faisal

@Faisal今天早上你好！费萨尔！我的按钮是一个向下的箭头，每次他被点击时，我希望它显示一个箭头，而不是像本网站中的例子http://angularjs.blogspot.fr/2017/03/angular-400-now-available.html （如果你看到右侧的博客存档，如果你点击它，布顿顿变了..很常见的东西） –

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

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

来源

2017-08-10 13:38:41 Faisal

非常感谢它工作正常..你知道一些教程，我可以学习如何使用这个打字稿表达？我明白？ =如果和：= =或但没有找到它的解释.. –

https://angular.io/guide/template-syntax – Faisal

伟大的我的朋友谢谢:-) –

我觉得你的IMG CSS类绑定到[ngClass]指令将做的工作更优雅的方式。

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

NgClass directive example

来源

2017-08-10 13:20:09 krzysztofla

根据我的代码在帖子中，你怎么可能......我没有明白.. –

@ EmileCantero它会看起来像这样'' – krzysztofla

谢谢你们两个解决方案都工作的解决方案，我需要学习更多，以打扰你很多 –

点击切换图像src

回答

相关问题