单击事件为angularclass切换类

时间:2019-01-29 06:23:25

标签: angular5

我的页面中有多个按钮,如下所示。我的问题是,当我单击一个按钮时,所有按钮的颜色都会改变。

如何防止仅单击的按钮的颜色改变?

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>
<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>
<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}

1 个答案:

答案 0 :(得分:0)

最简单的方法是为每个按钮提供布尔值。我会做类似的事情:

<div class="my_class" (click)="status1=!status1"  
    [ngClass]="status1 ? 'success' : 'danger'">                
     Some content
</div>
<div class="my_class" (click)="status2=!status2"  
    [ngClass]="status2 ? 'success' : 'danger'">                
     Some content
</div>
<div class="my_class" (click)="status3=!status3"  
    [ngClass]="status3 ? 'success' : 'danger'">                
     Some content
</div>

status1: boolean = false;
status2: boolean = false;
status3: boolean = false;

请注意,我没有使用任何功能。如果我们只想实现一些切换,我会发现这种方式更加便捷。