在Angular 2中，如何切换glyphicons并释放其功能？ * ngIf？

我正在为我的Angular 2应用程序设计一个简单的'最喜欢的'功能。下面的代码片段根据对象的当前状态正确显示glyphicon-star或glyphicon-star-empty。它还会触发相应的功能来收藏/取消收藏对象。在Angular 2中，如何切换glyphicons并释放其功能？ * ngIf？

但是我也需要它们在发射后切换状态，而不需要重新加载整个事情。 'star'div会触发'unfavoriteView（v.id）'，然后切换到'star-empty'div，当点击它时会触发'favoriteView（v.id）'并切换回'star' DIV。

有关如何做到这一点的任何想法？

<div *ngIf="v.usageInfo.favoritesTotal == 1"> 
    <a (click)="unfavoriteView(v.id)"><span class="glyphicon glyphicon-star"></span></a> 
</div> 

<div *ngIf="v.usageInfo.favoritesTotal == 0"> 
    <a (click)="favoriteView(v.id)"><span class="glyphicon glyphicon-star-empty"></span></a> 
</div>

来源

2016-07-26 Koen De Couck

您可以使HTML更加简洁。

<a (click)="toggleFavorite(v.id)"> 
    <span *ngIf="v.usageInfo.favoritesTotal == 1" 
     class="glyphicon glyphicon-star"></span></a> 
    <span *ngIf="v.usageInfo.favoritesTotal == 0" 
     class="glyphicon glyphicon-star-empty"></span> 
</a>

而不必为favorize两种功能，现在unfavorize你都只有toggleFavorite()，这是在控制一切。开关，当您更改glyphicon作品隐含的明星你v.usage.favoritesTotal

来源

2016-07-26 12:46:22 Matt

'toggleFavorite'肯定是更好了比有2个功能！我冒昧地把它改写成'toggleFavorite（v.id，v.usageInfo.favoritesTotal）'来区分这两种状态。但是由于某种原因，图标不会切换... –

你能提供一个plunkr吗？ – Matt

啊，不要紧，它与你的答案无关（值'v.usageInfo.favoritesTotal'没有像它应该更新）。 –

您可以用ngClass上favoritesTotal表达开关类：

<div *ngIf="v.usageInfo.favoritesTotal == 0"> 
    <a (click)="toggleFavoriteView(v.id, v.usageInfo.favoritesTotal == 0)"> 
    <span [ngClass]="['glyphicon', v.usageInfo.favoritesTotal == 0 
           ? 'glyphicon-star-empty' 
           : 'glyphicon-star']"></span> 
    </a> 
</div>

并在代码：

toggleFavoriteView(id, favorite: boolean) { 
    if (favorite) { 
     favoriteView(id); 
    } 
    else { 
     unfavoriteView(id); 
    } 
}

来源

2016-07-26 12:51:50 rinukkusu

我真的很喜欢uncommented downvotes - 我永远不会知道施法者发现的错误：D :( – rinukkusu

在Angular 2中，如何切换glyphicons并释放其功能？ * ngIf？

回答

相关问题