Html 仅自定义已单击的按钮

我开发了两个列，都有几个按钮。目标是单击每个按钮，更改该按钮的背景色和字体颜色

在早期阶段，所有按钮都处于自然状态。通过单击左列（a、B、C）中的按钮，我只希望该按钮更改背景颜色和字体颜色，与右列中的按钮相同

是否还有一种方法，每当你点击左列中的一个按钮时，如果右列中的任何按钮有背景色（已经点击），它将返回到其原始状态

我尝试使用jquery并处理ID和类，但这似乎不是最正确的方法

有人能帮我吗

HTML

<div class="row">
    <div class="col">
        <div *ngFor="let item of Groups">
            <button (click)="Change(0,item)" class="btnGrup">{{item.name}}</button>
        </div>
    </div>
    <div class="col">
        <div *ngFor="let item of Words">
            <button (click)="Change(1,item)" class="btn2">{{item.name}}</button>
        </div>
    </div>
</div>

---

只需向您的组中添加一个新属性，例如，将其称为“检查”

创建两个类

.class1
  {
     background-color: #f7f7f9;
   color: #BCBCCB 
   }
.class2
{
  background-color: rgba(73, 129, 194, 0.1);
  color: rgba(73, 129, 194, 1)
}

和使用

和使用

<div *ngFor="let item of Groups;let i=index">
            <button (click)="buttonSelect1=i" 
               class="btnGrup"
               [ngClass]="{'class1':buttonSelect1==i,'class2':buttonSelect1!=i}"
             >{{item.name}}</button>
</div>

{{item.name}

为什么不为按钮的活动和正常状态创建类，？然后，您可以简单地切换这些类。@AmitPandey活动类不应该工作，因为我希望当单击它时，它总是“活动”的，而不仅仅是单击。我用您的解决方案更新了链接，这很好。有一种方法可以选择一个，首先，它们将被“标记”。。。如果您将状态从A更改为B，因为状态不同，您可以先取消选择，然后使右侧列中的所有按钮处于自然状态？如果您希望“取消选择”第二组按钮，只需将变量设置为-1

。请记住，视图（the.html）与模型变量（the.ts）之间存在角度关系。

.class1
  {
     background-color: #f7f7f9;
   color: #BCBCCB 
   }
.class2
{
  background-color: rgba(73, 129, 194, 0.1);
  color: rgba(73, 129, 194, 1)
}

<button (click)="item.check=!item.check" 
         class="btnGrup"
         [ngClass]="{'class1':item.check,'class2':!item.check}"
       >{{item.name}}</button>

buttonSelect1=-1
buttonSelect2=-1

<div *ngFor="let item of Groups;let i=index">
            <button (click)="buttonSelect1=i" 
               class="btnGrup"
               [ngClass]="{'class1':buttonSelect1==i,'class2':buttonSelect1!=i}"
             >{{item.name}}</button>
</div>