1. 首先，在组件的 HTML 模板中，我们可以通过 *ngFor 指令来渲染我们的表格行，并为每个表格行绑定一个 click 事件。
2. 在组件的 TypeScript 代码中，我们需要定义一个属性来存储当前已打开的表格行的 index。在 click 事件监听器中，我们需要检查当前点击的行是否已经打开，如果是，则关闭它；否则，我们需要先关闭当前已打开的行，然后再打开当前点击的行。
3. 最后，我们可以使用 ngClass 指令来动态添加/移除每个表格行的 CSS 类，从而实现显示/隐藏效果。

以下是示例代码：

HTML 模板：

  

    

      
{{ item.name }}
      
{{ item.age }}
      
{{ item.email }}
    
  

TypeScript 代码：

export class MyComponent {
  items: any[];
  openIndex: number;

  constructor() {
    this.items = [
      {name: 'Alice', age: 25, email: 'alice@example.com'},
      {name: 'Bob', age: 30, email: 'bob@example.com'},
      {name: 'Charlie', age: 35, email: 'charlie@example.com'}
    ];
    this.openIndex = -1;
  }

  toggleRow(index: number) {
    if (index === this.openIndex) {
      // 点击已打开的行，关闭它
      this.openIndex = -1;
    } else {
      // 关闭当前已打开的行，打开当前点击的行
      this.openIndex = index;
    }
  }
}

CSS 样式：

tr.expanded {
  display: table-row;
}