如何切换和解开特定行，并在 *ngfor内部更改其背景

Question

我正在尝试切换并在 *ngfor loop中切换我的表中的特定 <tr>行，但当前它可以切换整个 <tr> tag，

我已经尝试在我的<tr>上应用此此功能，但是其他字段仍然可以切换/解开。

这是我尝试过的代码：

 <tr
   *ngFor="let repo of repos; let idx = index"
   #tr 
   (click)="tr.classList.toggle('selected')">

预期结果：

能够切换并解开我的当前选择。如果我选择了，请假设第一行并要切换第二行。它应该切换第二行并解开第一行。

实际输出：我可以突出显示切换并解开每行

Answer 1

如果您一次只想选择一行，则可以使变量存储所选行的ID。

<tr *ngFor ="let item of [a,b,c,d]; let idx = index" #tr (click)="selectedRow == idx ? selectedRow = null : selectedRow = idx" [class.selected]="selectedRow == idx">
  <td>Data</td>
</tr>

并创建变量(如果使用Typescript，类似的话(：

selectedRow: number = null;

https://stackblitz.com/edit/angular-pyebj4

Answer 2

您可以做这样的事情。

ts

export class AppComponent  {
  items = [{ leter: 'a', selected: false}, { leter: 'b', selected: false}, { leter: 'c', selected: false}, { leter: 'd', selected: false}];
  selectedIndex: number = null;
}

html

 <tr *ngFor ="let item of items; let i = index" 
    (click)="item.selected = !item.selected; selectedIndex = i" 
    [class.selected]="item.selected && selectedIndex === i">
    <td>Data</td>
  </tr>

stackblitz demo