如何实现点击按钮切换隐藏td元素的显示与隐藏状态

实现逻辑 #

你需要为每个控制按钮绑定独立的布尔状态，点击时对状态取反，再通过状态值控制对应td元素的显隐，即可实现切换效果。

具体实现步骤 #

• 第一步：在组件中定义状态存储对象
  在app.component.ts中添加状态对象，用来存储每个按钮对应td的显隐状态，默认值为false（默认隐藏）：

// key为按钮编号，value为对应td是否显示
showTdMap: Record<number, boolean> = {};

// 若按钮数量固定，可在初始化时批量赋值初始状态
ngOnInit(): void {
  // 示例：适配编号1-5的按钮，可根据实际数量调整
  for (let i = 1; i <= 5; i++) {
    this.showTdMap[i] = false;
  }
}

• 第二步：添加切换事件处理方法
  新增点击事件方法，每次点击对应按钮时将状态取反：

toggleTdDisplay(btnId: number): void {
  this.showTdMap[btnId] = !this.showTdMap[btnId];
}

• 第三步：模板层绑定逻辑
  给按钮绑定点击事件，传入对应编号，同时可以绑定动态class做激活态样式区分：

<!-- 按钮示例，根据你的实际编号替换参数即可 -->
<button 
  (click)="toggleTdDisplay(1)"
  [class.active]="showTdMap[1]"
>
  1
</button>

给对应td元素绑定显隐逻辑：

<!-- 用ngIf直接移除元素，或者用hidden控制显隐，按需选择即可 -->
<td *ngIf="showTdMap[1]">编号1对应的隐藏内容</td>

如果你的按钮和td是通过循环动态生成的，直接把循环的索引或者对应id作为参数传入方法即可，不需要逐个手动编写。

内容的提问来源于stack exchange，提问作者user16665949