如何在单击图标时在同一div中切换2个图标

我想实现angular2中的功能，类似于任何邮件加星标时发生的情况。例如： - 当我点击空白的星形图标时，通过一些服务电话进行检查，如果结果为真，那么在HTML的同一个div标签中显示一个带有星号图标的新图标。如何在单击图标时在同一div中切换2个图标

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

有人能上点击图标点击事件即这种切换部分帮助应该改变基于响应？

来源

2017-02-23 user2898158

– user2898158

可以使用NG-展示和NG-隐藏做到这一点

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

来源

2017-02-23 11:44:29 IsuruKusumal

使用属性用于存储项目是否已加星标，并绑定到该项目以显示其中一个或另一个图像。然后在未加星标图标的点击处理程序中使用另一个函数，使请求对其进行加星标并更新属性。

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

并在视图模型，你有这样的：

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属性。而不是star（）和unstar（）方法使用单一的toggleStar()方法。数十个选项在这里。

来源

2017-02-23 11:56:02 Matthias247

如何在单击图标时在同一div中切换2个图标

回答

相关问题