如何在Angular 5中实现无外部库的可展开动态表格？

刚好之前做过类似的需求，用ng-bootstrap的Collapse组件完全能搞定动态行的展开/折叠，核心是给每行绑定独立的状态变量，避免所有行共用一个状态导致的混乱。下面一步步给你讲怎么实现：

因为表格行数是动态的，我们需要给每一行数据分配一个专属的折叠状态（展开/关闭）。可以用一个对象来存储这些状态，键值对对应「行的唯一标识」和「折叠状态布尔值」，这样每行的操作就不会互相影响。

1. 组件逻辑（TypeScript） #

这里假设你的表格数据有唯一id作为标识，我们用collapseStates对象来管理每行的状态：

import { Component } from '@angular/core';
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-expandable-table',
  standalone: true,
  imports: [NgbCollapseModule],
  templateUrl: './expandable-table.component.html',
  styleUrls: ['./expandable-table.component.css']
})
export class ExpandableTableComponent {
  // 动态表格数据（可以是异步从API获取的）
  tableData = [
    { id: 1, name: '张三', age: 25, department: '技术部' },
    { id: 2, name: '李四', age: 30, department: '市场部' },
    // 更多动态数据...
  ];

  // 存储每行的折叠状态：key=行id，value=是否展开
  collapseStates: { [key: number]: boolean } = {};

  constructor() {
    // 初始化所有行默认处于关闭状态
    this.initCollapseStates();
  }

  // 切换指定行的展开/折叠状态
  toggleCollapse(rowId: number) {
    this.collapseStates[rowId] = !this.collapseStates[rowId];
  }

  // 初始化折叠状态（如果是异步数据，要在数据加载完成后调用）
  private initCollapseStates() {
    this.tableData.forEach(row => {
      this.collapseStates[row.id] = false;
    });
  }

  // 优化*ngFor性能的trackBy方法
  trackById(index: number, row: any) {
    return row.id;
  }
}

2. 模板（HTML） #

在原来的循环渲染逻辑基础上，添加展开按钮和折叠面板：

<div class="table-container">
  <!-- 表格头部 -->
  <div class="table-row header">
    <div class="table-cell"></div> <!-- 展开按钮列 -->
    <div class="table-cell">姓名</div>
    <div class="table-cell">年龄</div>
    <div class="table-cell">部门</div>
  </div>

  <!-- 动态渲染表格行 -->
  <div *ngFor="let row of tableData; trackBy: trackById" class="table-row">
    <div class="table-cell">
      <!-- 展开/折叠按钮 -->
      <button class="btn btn-sm btn-outline-primary" (click)="toggleCollapse(row.id)">
        {{ collapseStates[row.id] ? '收起' : '展开' }}
      </button>
    </div>
    <div class="table-cell">{{ row.name }}</div>
    <div class="table-cell">{{ row.age }}</div>
    <div class="table-cell">{{ row.department }}</div>
  </div>

  <!-- 每行的额外信息折叠面板 -->
  <div *ngFor="let row of tableData; trackBy: trackById" class="table-row">
    <div [ngbCollapse]="!collapseStates[row.id]" class="extra-info-cell">
      <div class="p-3 bg-light border rounded">
        <h6>{{ row.name }}的详细信息</h6>
        <p>用户ID：{{ row.id }}</p>
        <p>入职时间：2023-01-15</p>
        <p>联系方式：138xxxx1234</p>
        <!-- 可以根据需求添加任意自定义内容 -->
      </div>
    </div>
  </div>
</div>

3. 样式（CSS） #

给自定义表格加基础样式，让布局更规整：

.table-container {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 1px;
  border: 1px solid #dee2e6;
  margin: 2rem;
}

.table-row {
  display: contents;
}

.table-cell {
  padding: 0.75rem;
  border: 1px solid #dee2e6;
}

.header .table-cell {
  font-weight: bold;
  background-color: #f8f9fa;
}

.extra-info-cell {
  grid-column: 1 / -1; /* 让额外信息跨所有列 */
  padding: 0 0.75rem 0.75rem;
}

1. 独立状态管理：用collapseStates对象存储每行的状态，确保点击某一行的按钮只会影响该行的展开/折叠，不会牵连其他行。
2. 异步数据适配：如果表格数据是从API异步获取的，要在数据加载完成后调用initCollapseStates()方法初始化状态，比如在订阅回调里：

   this.dataService.getTableData().subscribe(data => {
     this.tableData = data;
     this.initCollapseStates();
   });
   

3. 性能优化：添加trackBy方法可以避免Angular在数据更新时重新渲染所有行，提升动态表格的性能。
4. Collapse绑定逻辑：ngbCollapse的属性是true时折叠，false时展开，所以我们用!collapseStates[row.id]来对应状态——当collapseStates[row.id]为true（展开）时，ngbCollapse为false（不折叠）。

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