Angular 2更改按鈕樣式onClick

我在嘗試更新單擊按鈕樣式時遇到了很多麻煩。Angular 2更改按鈕樣式onClick

首先，這裏是原來的標記：

<button class="btn btn-add" (click)="handleButtonClick(id)"> 
    Add<i class="fa fa-plus-circle"></i> 
</button>

單擊按鈕時，我想：

變化從"btn btn-add"的類"btn btn-remove"
更改<i class="fa fa-plus-circle">至<i class="fa fa-minus-circle">

我怎樣才能做到這一點的角度2？現在我只是添加了一個布爾值並將其翻轉，並根據該值顯示不同的模板。但是，似乎應該有辦法通過一些功能來處理這個問題吧？在文檔中說它可以使用由多個類的空格分隔的字符串，但我不知道如何做到這一點。

來源

2016-09-11 user1354934

你有至少嘗試過的東西嗎？或者看看文檔？ – lexith

是啊，我看了文檔https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html。它說你可以使用多個由空間分隔的類，但我無法得到它的工作:( – user1354934

在你的評論說，您嘗試ngClass但與它的麻煩：

該指令願與類名作爲密鑰和布爾對象表達爲價值。如果表達式爲真，則添加該類，否則將被刪除。

例如您的按鈕具有類btn，並應具有取決於一個布爾值要麼btn-add或btn-remove，可能比你做這樣的事情：

<button class="btn" [ngClass]="{ 'btn-add': isAddButton, 'btn-remove': !isAddButton }"> 
</button>

希望這有助於在你的ngClass瞭解，那麼在其他用例上使用它不會有問題。

來源

2016-09-11 19:05:56 lexith

謝謝！但我想我的問題是，按鈕是一個無序的列表，顯示照片的一部分。是否有可能只改變類爲一個特定的照片，添加？對不起，我真的很困惑angualr 2 :(因爲現在當我添加1張照片，它會改變所有的樣式 – user1354934

這是一個不同的問題:)沒有任何示例代碼很難給出答案當然，例如，如果你談論一個'ngFor'：而不是使用你的組件的屬性，你可以直接使用你的照片對象的屬性來決定按鈕應該屬於哪個類 – lexith

thx。我想我會添加在REDX作爲一個國旗點擊添加，添加=真 – user1354934

你可以試試這個代碼：

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = true"> 
    Add<i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i> 
</button>

來源

2016-09-11 19:04:50 yurzui

要切換按鈕的文本太：

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = !clicked"> 
    {{clicked ? 'Remove' : 'Add'}} 
    <i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i> 
</button>

來源

2017-12-04 23:01:34 Stacked

Angular 2更改按鈕樣式onClick

回答

相關問題