Angular 2：處理按鈕的單擊事件

Question

我有3個按鈕。 當我單擊第一個按鈕時，其文本和css會更改，而當我單擊同一按鈕時，則會像以前一樣獲得默認的css。 我想要所有3個按鈕。 我已經嘗試過此代碼。

 .add_btn{ border:thin red solid; } .added_btn{ border:thin black solid; } 

 <button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> <button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> <button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> 

我可以通過單擊添加多個按鈕。

任何幫助都會很棒。

謝謝。

Answer 1

您可能要使用Angular2 +的NgClass功能，因為它可以從HTML元素中添加或刪除CSS類。

Answer 2

<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>
<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>
<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>

.added_btn{
  border:thin black solid !important;
}