アイコンがクリックされたときに同じdiv内の2つのアイコンを切り替える方法

Question

2の角度2で機能を達成したいのは、どのメールがスター付きであるかと同様です。例： - 空の星アイコンをクリックすると、サービスコールを介してチェックが行われ、結果が真の場合は、同じdivタグの新しいアイコンがHTMLに表示されます。

<div class="star-result" > 
<img src="./images/star_unfilled.png" id="star-result" (click)="isStarred()" alt="Star this result">&nbsp;{{RowName}} 
</div> 

クリックイベントでこのトグル部分を手伝ってもらえますか？つまり、アイコンは応答に基づいて変更する必要がありますか？

Answer 1

あなたはこの

<div data-ng-show=(true)> <img/> </div> 
 
<div data-ng-show=(false)> <img/> </div>

か、あなたのケースで

<div class="star-result" data-ng-click="selected!=selected"> 
 
    <img data-ng-show="selected" src="./images/star_unfilled.png" id="star-result" alt="Star this result"/> 
 
    <img data-ng-hide="selected" src="./images/star_filled.png" id="star-result" alt="Star this result"/> 
 
    {{RowName}} 
 
</div>

Answer 2

プロパティを使用を行うにはNG-ショーとngの非表示を使用することができますそのアイテムは、アイテムが既に星印を付されているかどうかを格納しており、どちらか一方のイメージを表示するためにバインドされています。次に星印を付けられていないアイコンのクリックハンドラで別の関数を使用して、星形を要求してプロパティを更新します。

isStarred: boolean = false; 

star() { 
    // Do whatever it takes to star something 
    // And at the end update local status 
    isStarred = true; 
} 

unstar() { 
    // Do whatever it takes to star something 
    // And at the end update local status 
    isStarred = false; 
} 

あなたはまた、任意の単一img要素を使用してisStarred値に応じてsrcプロパティをバインドできます。

<img *ngIf="!isStarred" src="./images/star_unfilled.png" id="star-result" (click)="star()" alt="Star this result"> 
<img *ngIf="isStarred" src="./images/star_filled.png" id="star-result" (click)="unstar()" alt="Unstar this result"> 

とのviewmodelで

は、あなたのようなものを持っています。また、star（）メソッドとunstar（）メソッドの代わりに、 toggleStar()メソッドを使用します。数十種類のオプションがあります。