Angular Material v21.2.7 Expansion Panel无法展开问题求助

我在使用Angular Material 21.2.7开发项目时，遇到mat-expansion-panel无法展开的问题——面板包含子项，但点击主菜单箭头毫无反应。相关代码如下：

@for(cat of productCategories();track cat)
{   
 <mat-accordion> 
  <mat-expansion-panel class="custom-panel">
    <mat-expansion-panel-header class="mainmenu">
      <mat-panel-title> 
          {{cat.name}} 
      </mat-panel-title>      
    </mat-expansion-panel-header>     
      <div class="menucontenta">      
        @for(subcat of cat.productSubCategories;track subcat)
        {    
          <li class="submenuitem">
            <a [routerLink]="['ProductSubCatogory',subcat.id]" id="sub{{subcat.id}}">{{subcat.name}}</a>
          </li>
        }       
      </div>   
  </mat-expansion-panel>
</mat-accordion> 
} 

这段代码在新创建的Angular项目中能正常运行，但当前项目的浏览器控制台有多个警告，可从以下方向排查问题：

• 核对依赖完整性与版本一致性

  1. 确认当前模块已导入MatExpansionModule和MatAccordionModule，根模块已导入BrowserAnimationsModule（Angular Material组件依赖动画模块实现交互逻辑）。
  2. 执行命令检查依赖版本，确保@angular/material、@angular/cdk、@angular/animations的版本与Angular核心版本（21.2.7）完全匹配：

     npm list @angular/material @angular/cdk @angular/animations
     

     版本不匹配是组件功能异常的常见诱因。

• 分析控制台警告信息
  重点关注与扩展面板、动画或依赖相关的警告，比如：

  • 提示缺失动画模块
  • 组件未正确导入的报错
  • CDK相关模块缺失的提示
    这些警告直接指向问题根源，需针对性修复。

• 排查自定义样式冲突
  检查custom-panel、mainmenu等自定义类的样式，确认是否存在以下情况：

  • 设置pointer-events: none阻断点击事件
  • 修改面板头部的z-index或定位属性，导致点击区域被遮挡
    可临时移除自定义样式，测试面板是否恢复正常展开功能。

• 验证数据流稳定性
  确认productCategories()信号（或Observable）的数据流是否稳定，是否存在频繁变更导致组件状态异常。可临时替换为静态数组测试，排除数据驱动的问题。

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