Question

我有3个按钮。当我点击第一个按钮然后它的文本和CSS被更改，当我点击相同的按钮然后我像以前一样得到默认的CSS。我想要所有3个按钮。我试过这段代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我可以通过点击添加多个按钮。

任何帮助都会很棒。

谢谢。

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

Angular 2：处理按钮的点击事件

2 个答案: