Question

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

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

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

Answer 1

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

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

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

单击事件为angularclass切换类

1 个答案: