クリックして画像srcを切り替えます

Question

こんにちは、角度のあるコミュニティ！

私もAN私は、次のように 『arrow_up「それはショーのIMGをクリックされるたびに、』ボタン/ IMGを変更したい、多分ngClassは、CSSを変更するボタンのIMGを持っている？

マイボタンがあります矢印を押し下げてクリックするたびに、このウェブサイトのように矢印を表示したいと思います。Angular Blogspot（右のブログアーカイブが表示されていれば、それをクリックするとバートンが変わりました。非常に共通しています）

私は[非表示]で例を挙げていますが、仕事を行う最もエレガントな方法があります：

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

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

Answer 2

私はもっとエレガントな方法仕事をする[ngClass]ディレクティブにあなたのimg cssクラスを結合だと思います。

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

NgClass directive example