Angular 5版本后mat-expansion-panel默认展开异常问题咨询

看起来你的问题出在面板渲染时机和状态变量初始化的配合上，结合你的代码，我整理了几个关键修复点：

1. 显式初始化状态变量 #

你的expansionPanelIndex如果没有在组件类里明确初始化，默认值会是undefined。而Angular Material的mat-expansion-panel在[expanded]绑定值为undefined时，可能会 fallback 到默认的展开状态（这是Angular 5对应Material版本的一个常见行为）。

在组件类里直接初始化这个变量：

export class YourComponent {
  expansionPanelIndex: number = -1; // 初始化为-1，确保默认无面板展开
  selectedIndex: number = 0; // 同时给selectedIndex设置合理初始值
  // ... 其他属性和方法
}

2. 切换Tab时重置面板状态 #

当你切换到索引为2的Tab时，*ngIf才会渲染这些面板。如果之前打开过某个面板，expansionPanelIndex会保留之前的索引值，导致新渲染的面板直接展开。所以在tabChanged方法里添加重置逻辑：

tabChanged(tabChangeEvent: MatTabChangeEvent): void { 
  this.selectedIndex = tabChangeEvent.index; 
  // 切换到目标Tab时，强制重置面板展开状态
  if (this.selectedIndex === 2) {
    this.expansionPanelIndex = -1;
  }
}

3. 优化展开状态的绑定表达式 #

为了避免undefined带来的意外，给[expanded]的绑定加上兜底逻辑，确保只有当expansionPanelIndex明确等于当前索引时才展开：

<mat-expansion-panel *ngIf="selectedIndex == 2" 
                     (closed)="onClosed(i)" 
                     (opened)="onOpened(i)" 
                     [expanded]="expansionPanelIndex === i || false">
  <mat-expansion-panel-header> 
    <mat-panel-title> .... </mat-panel-title> 
    <mat-panel-description> ... </mat-panel-description> 
  </mat-expansion-panel-header> 
</mat-expansion-panel>

额外检查点 #

• 确认没有其他异步逻辑或生命周期钩子（比如ngOnInit、ngAfterViewInit）意外修改了expansionPanelIndex的值
• 确保你的Angular Material版本和Angular 5完全兼容（Angular 5对应的Material版本是5.x，跨大版本混用容易出问题）

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