Angular 7中基于ngFor的多表格独立展开折叠实现方案问询

完全可以通过状态数组来为每个表格设置独立的展开/折叠状态，这也是Angular里处理这类多组件独立状态的标准做法。你的问题根源就是用了单个全局布尔值show，导致所有表格共享同一个状态，点击任意按钮都会触发全局状态变更。下面是修改后的完整代码：

1. 组件类（TypeScript）修改 #

首先定义一个和contactDetails长度一致的状态数组，用来存储每个表格的展开状态，然后重构viewDetailOption方法，通过索引操作对应表格的状态，同时去掉不必要的DOM操作（改用Angular的数据驱动方式）：

import { Component, OnInit } from '@angular/core';

@Component({
  // 保留你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  contactDetails: any[] = []; // 你的数据源
  showStates: boolean[] = []; // 每个表格的独立状态数组

  ngOnInit(): void {
    // 假设你在这里加载contactDetails数据，加载完成后初始化状态数组
    // 示例：如果是从接口获取数据，就在subscribe回调里初始化
    // this.yourService.getContactDetails().subscribe(data => {
    //   this.contactDetails = data;
    //   this.showStates = this.contactDetails.map(() => false); // 初始全部折叠
    // });
    
    // 模拟数据加载后的初始化（根据你的实际情况调整）
    this.showStates = this.contactDetails.map(() => false);
  }

  viewDetailOption(index: number) {
    // 切换对应索引表格的状态
    this.showStates[index] = !this.showStates[index];
  }
}

2. 模板（HTML）修改 #

利用*ngFor的索引绑定对应状态，用ngClass控制图标和扩展列的显示，完全摆脱DOM操作：

<div class="container-fluid"> 
  <app-tab-selector [contactDescription]='contactDescription' [contactId]="id" [data]="contactDetails"></app-tab-selector> 
  <br> 
  <a class="btn btn-raised btn-primary">Add</a> 
  <section id="striped-light"> 
    <div class="row text-left"> 
      <div class="col-sm-12"> 
        <div class="card" *ngFor="let contact of contactDetails; let i = index" [attr.id]="'fcard' + i"> 
          <div class="card-header"> 
            <p class="card-title">{{contact.name}} </p>
            <!-- 根据对应状态切换图标 -->
            <span 
              class="pull-right fa fa-2x" 
              [ngClass]="showStates[i] ? 'fa-angle-double-left' : 'fa-angle-double-right'"
              (click)="viewDetailOption(i)" 
              placement="top" 
              ngbTooltip="Collapse / Expand"
            ></span> 
          </div> 
          <div class="card-content"> 
            <div class="card-body"> 
              <table class="table table-striped "> 
                <thead> 
                  <tr [attr.id]="'fr' + i"> 
                    <th> No.</th> 
                    <th>Capacity</th> 
                    <th>T/A</th> 
                    <th>SType</th> 
                    <th>SLayout</th> 
                    <!-- 用ngClass控制扩展列的显示类 -->
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">RS</th> 
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">TA</th> 
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">SA</th> 
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">DR</th> 
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">FE</th> 
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">NB</th> 
                    <th [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">LT</th> 
                    <th class="">Operations</th> 
                  </tr> 
                </thead> 
                <tbody > 
                  <tr *ngFor="let item of contact.ph"> 
                    <td>{{item.no}}</td> 
                    <td>{{item.cap}}</td> 
                    <td>{{item.ta}}</td> 
                    <td>{{item.st}}</td> 
                    <td>{{item.sLayout}}</td> <!-- 补全你的属性名 -->
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">{{item.rs}}</td> <!-- 补全属性名 -->
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">{{item.taExt}}</td> <!-- 补全属性名 -->
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">{{item.sa}}</td> <!-- 补全属性名 -->
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">1200m</td> 
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">{{item.fe}}</td> <!-- 补全属性名 -->
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">{{item.nb}}</td> <!-- 补全属性名 -->
                    <td [ngClass]="showStates[i] ? 'show' : 'extendedViewOnly'">{{item.lt}}</td> <!-- 补全属性名 -->
                    <td><a href="#"><i class="fa fa-edit fa-2x"></i></a></td> 
                  </tr> 
                </tbody> 
              </table> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </section>
</div>

关键说明 #

• 状态数组showStates：每个元素对应contactDetails中一个表格的展开状态，索引完全匹配，实现真正的独立控制。
• 数据驱动替代DOM操作：用ngClass根据状态动态切换CSS类，符合Angular的响应式编程理念，避免直接操作DOM带来的维护风险和兼容性问题。
• 索引传递：点击事件传递当前表格的索引i，确保只修改对应表格的状态，不会影响其他表格。

这样修改后，每个表格的展开/折叠状态就完全独立了，点击任意按钮只会影响对应的表格，不会再出现全局状态异常的问题。

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