Angular技术问题：如何通过NgFor实现单次仅展开一个手风琴？

你的问题主要出在三个地方：

1. 用单个布尔值panelOpenState无法区分多个循环面板的状态，NgFor渲染的每个面板需要独立标识来跟踪展开状态
2. 把*ngIf="panelOpenState"加在mat-expansion-panel-header上，初始状态为false时直接隐藏了面板头部，导致整个面板无法显示
3. 点击事件绑定在面板上，和组件自身的展开逻辑冲突，且无法精准控制单个面板的展开状态

下面是修正后的完整代码：

user-detail.component.html #

<mat-accordion>
  <!-- 注意：这里需要补充你原代码中遗漏的NgFor循环，比如*ngFor="let post of posts" -->
  <mat-expansion-panel 
    [expanded]="openedPanelId === post.id"
    (opened)="commentOpen(post.id)"
    (closed)="closePanel(post.id)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{openedPanelId === post.id ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <form [formGroup]="commentForm" >
      <input matInput type="text" formControlName="email" placeholder="email" #commentEmail required>
      <input matInput type="text" formControlName="name" #commentName placeholder="name" required>
      <textarea matInput class="commentArea" formControlName="body" #commentBody placeholder="Commenta..."></textarea>
      <button type="submit" [disabled]="commentForm.invalid" 
      (click)="onSubmitComment(commentEmail.value, commentName.value, commentBody.value, post.id)">Invia</button>
    </form>

    <div *ngFor="let comment of comments">
      {{comment.id}}
      <br>
      {{comment.email}}
      <br>
      {{comment.name}}
      <br>
      {{comment.body}}
    </div>
  </mat-expansion-panel>
</mat-accordion>

user-detail.component.ts #

// 用当前展开的面板ID替代单个布尔值，精准跟踪哪个面板处于展开状态
openedPanelId: number | null = null;

commentOpen(idPost: any){
    this.commentService.postId = idPost;
    this.getCommentDetailByUser();
    // 设置当前展开的面板ID
    this.openedPanelId = idPost;
}

// 处理面板关闭事件，重置展开状态
closePanel(idPost: any){
    if(this.openedPanelId === idPost){
        this.openedPanelId = null;
    }
}

关键修改说明 #

• 用openedPanelId存储当前展开的面板ID，替代原来的布尔值，能精准区分每个面板的状态
• 给mat-expansion-panel绑定[expanded]="openedPanelId === post.id"，只有ID匹配的面板会展开，配合mat-accordion默认的multi=false属性，天然实现“每次仅展开一个”的效果
• 去掉了mat-expansion-panel-header上的*ngIf，确保面板头部始终显示，保证面板正常交互
• 改用(opened)事件触发评论加载，避免点击面板时重复执行逻辑，更符合组件生命周期

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