在使用 ngFor 生成的按钮上，使用 ngClass 更改单击按钮的颜色

Question

屏幕上共有 80 个按钮，呈现如下：

<tr *ngFor="let plans of PlanList">
    <td class="text-primary">{{plans.typename}} </td>
    <td class="text-center"><a (click)="criticalSelect(plans.typeid, '1', plans.plan1, '250')" class="btn btn-primary text-white">${{plans.plan1}}</a></td>
    <td class="text-center"><a (click)="criticalSelect(plans.typeid, '2', plans.plan2, '250')" class="btn btn-primary text-white">${{plans.plan2}}</a></td>
    <td class="text-center"><a (click)="criticalSelect(plans.typeid, '3', plans.plan3, '250')" class="btn btn-primary text-white">${{plans.plan3}}</a></td>
    <td class="text-center"><a (click)="criticalSelect(plans.typeid, '4', plans.plan4, '250')" class="btn btn-primary text-white">${{plans.plan4}}</a></td>
</tr>

当按钮被点击时，我调用criticalSelect()

一切都很好，直到用户要求我将点击按钮的颜色从 btn-primary 更改为 btn-success。我相信我必须使用 ngClass 来执行此操作，但我不知道如何识别正在单击的按钮，如果单击了另一个按钮，则将前一个按钮放回 btn-primary 并将新按钮放回 btn-success

Answer 1

考虑使用ngForOf 索引导出变量来为预定义变量分配最后一次单击的按钮索引，接下来使用ngClass 有条件地将btn-success 应用于元素，具体取决于其id 是否等于lastClicked，如下所示：

组件：

lastClicked: number;

模板：

<tr *ngFor="let plans of PlanList; let index" (click)="lastClicked = index" [ngClass]="{'btn-success': index == lastClicked}" >
  <td class="text-primary">{{plans.typename}} </td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan1}}</a></td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan2}}</a></td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan3}}</a></td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan4}}</a></td>
</tr>