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

回答

相關問題