Angular/Bootstrap -切换/折叠具有特定ID的表行？

<table>
  <tr *ngFor="let item of items; let i = index" [attr.id]="'row-' + i">
    <td>{{ item.name }}</td>
    <td>{{ item.description }}</td>
    <td>
      <button (click)="toggleRow(i)">Toggle</button>
    </td>
  </tr>
</table>

export class MyComponent {
  items: any[] = [
    { name: 'Item 1', description: 'Description 1' },
    { name: 'Item 2', description: 'Description 2' },
    { name: 'Item 3', description: 'Description 3' }
  ];
  collapsedRows: boolean[] = [];

  toggleRow(index: number) {
    this.collapsedRows[index] = !this.collapsedRows[index];
  }
}

<table>
  <tr *ngFor="let item of items; let i = index" [attr.id]="'row-' + i">
    <td>{{ item.name }}</td>
    <td>{{ item.description }}</td>
    <td>
      <button (click)="toggleRow(i)">Toggle</button>
    </td>
  </tr>
  <tr *ngFor="let item of items; let i = index" [attr.id]="'row-' + i + '-details'" [style.display]="collapsedRows[i] ? 'none' : 'table-row'">
    <td colspan="3">Details for {{ item.name }}</td>
  </tr>
</table>