Нажмите Событие для angularclass для класса переключения

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;

Обратите внимание, что я не использовал ни одной функции.Я нахожу этот способ быстрее и проще, если мы просто хотим реализовать некоторые переключатели.