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