在循环中单击时更改按钮上的css

Question

<td *ngFor="let item of payment ;  let y=index">
    <div class="btn-group" role="group" aria-label="example">
        <button type="button" (click)="toggle(y)" class="btn-primary">Card</button>
        <button type="button" (click)="toggle(y)" class="btn-primary cash" [ngClass]="item.type === "cash" ? 'cash' : 'card'" >Cash</button>
        <button type="button" (click)="toggle(y)" class="btn-primary credit" [ngClass]="item.type === "credit" ? 'credit' : 'card'" >Credit</button>
    </div>
</td>
<-- below is for checkboxes not important... -->
<td *ngFor="let checkbox of checkboxlist >
    <td *ngFor="let data of product">
     ....

我有一张表格，上面和下面是我需要更改但仍坚持使用的代码段。

               (tom)                         |               (sam)                    
 Type     Card        Cash         Credit    |    Card        Cash         Credit                    
  1    [CheckBox[x] | CheckBox[]| CheckBox[] |  [CheckBox[] | CheckBox[] | CheckBox[x]
  2    [CheckBox[x] | CheckBox[]| CheckBox[] |  [CheckBox[] | CheckBox[] | CheckBox[x]
  3    [CheckBox[x] | CheckBox[]| CheckBox[] |  [CheckBox[] | CheckBox[] | CheckBox[x]
...

我想做的是，当我单击特定类型的行（例如卡，现金，信用）时，更改一栏类型的CSS。这三个按钮之一上的按钮将更改。但是我的实现当前会更改所有Card的CSS，即使在第二列也是如此。因此，如果我按Cash键，那么（tom）卡和（sam）卡都会改变颜色。如果要按（tom）上的change键，我只想（tom）更改。我应该怎么做才能只限制更改一列？