Angular Material折叠面板：点击按钮展开失效问题求助

问题根源 #

你当前的核心问题有两个：

• opened/closed事件中用了===比较运算符而非=赋值运算符，导致panelOpenState没有正确更新；
• 手动折叠面板时，父组件的secondDriverExpanded变量未同步更新为false，后续点击按钮设置为true时，因变量值未发生变更，Angular变更检测未触发，面板无法展开。

解决方案步骤 #

1. 修复包装组件的事件绑定与状态同步 #

修改app-side-panel-accordian组件的HTML，移除mat-expansion-panel-header上自定义的click事件（Angular Material面板会自动处理展开/折叠逻辑，手动绑定会导致状态冲突），并正确利用opened/closed事件同步状态，同时添加输出事件通知父组件状态变化：

<mat-accordion>
    <mat-expansion-panel 
        (opened)="onPanelOpened()" 
        (closed)="onPanelClosed()" 
        [expanded]="data.expanded">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{ data?.title }}
            </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-content></ng-content>
    </mat-expansion-panel>
</mat-accordion>

2. 更新包装组件TS逻辑 #

添加@Output事件，当面板状态变化时通知父组件，同时同步内部panelOpenState：

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { SidePanelAccordianData } from './side-panel-accordian.model';

@Component({
  selector: 'app-side-panel-accordian',
  templateUrl: './side-panel-accordian.component.html',
  styleUrls: ['./side-panel-accordian.component.scss']
})
export class SidePanelAccordianComponent implements OnInit {
  @Input() data: SidePanelAccordianData;
  @Output() expandedChange = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
    // 初始化时同步panelOpenState与expanded的值
    this.data.panelOpenState = this.data.expanded;
  }

  onPanelOpened() {
    this.data.panelOpenState = true;
    this.expandedChange.emit(true);
  }

  onPanelClosed() {
    this.data.panelOpenState = false;
    this.expandedChange.emit(false);
  }
}

3. 父组件中实现双向绑定同步状态 #

修改父组件HTML，通过输出事件同步secondDriverExpanded与面板的expanded状态：

<app-side-panel-accordian 
    [data]="{title:'Title', panelOpenState: secondDriverExpanded, expanded: secondDriverExpanded}"
    (expandedChange)="secondDriverExpanded = $event">
    <div class="inner-row-data">
      <form-input [formStatus]="formStatus" [parentFormGroup]="setupForm" [data]="{
        formControlName: 'secondDriverName',
        name: 'secondDriverName',
      }" (onBlur)="setSecondDriverDetails('name')">
      </form-input>
    </div>
</app-side-panel-accordian>

<form-button type="button" (click)="onNext()">Next</form-button>

4. 父组件TS逻辑保持不变 #

你的onNext方法无需修改，只要secondDriverExpanded能正确同步状态，设置为true时面板就会自动展开：

public secondDriverExpanded = true;

onNext() {
  // 验证逻辑示例
  if (this.setupForm.get('secondDriverName').invalid) {
    this.secondDriverExpanded = true;
  }
}

关键说明 #

• 移除自定义click事件：Angular Material的mat-expansion-panel-header本身会触发面板展开/折叠，手动绑定click修改panelOpenState会导致状态不同步；
• 利用expandedChange输出事件：确保父组件的secondDriverExpanded与面板实际状态完全同步，避免后续设置true时因值未变更导致的无响应问题；
• 初始化同步状态：在ngOnInit中让panelOpenState与expanded保持一致，避免初始状态不一致的问题。

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