Angular mat-expansion-panel异常：展开状态无法切换且无切换图标

你遇到的问题根源很清晰——你在app.module.ts里导入了NoopAnimationsModule，这个模块是Angular用来完全禁用动画的“空实现”模块，但Angular Material的<mat-expansion-panel>组件依赖Angular的动画系统来处理展开/折叠的状态切换，以及显示标志性的切换箭头图标。

解决方案：替换动画模块 #

只需要两步修改就能解决：

1. 移除NoopAnimationsModule的导入
2. 导入BrowserAnimationsModule（Angular官方提供的浏览器动画支持核心模块）

修改后的app.module.ts相关代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
// 移除NoopAnimationsModule，替换为BrowserAnimationsModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule, } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatExpansionModule } from '@angular/material/expansion';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/post-create/post-create.component';
import { HeaderComponent } from './header/header.component';
import { PostListComponent } from './posts/post-list/post-list.component';

@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
    HeaderComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    // 这里替换为BrowserAnimationsModule
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外说明 #

如果你的项目之前没有安装动画依赖（Angular CLI新建的项目通常已包含），可以运行以下命令确保依赖齐全：

npm install @angular/animations

为什么NoopAnimationsModule会导致这个问题？因为它会拦截所有动画触发逻辑，返回一个“无操作”的动画对象。而<mat-expansion-panel>的折叠/展开状态切换、箭头图标的显示与旋转，都是和动画生命周期绑定的——没有动画支持，组件就无法正确响应点击事件，也不会渲染切换图标。

内容的提问来源于stack exchange，提问作者Wojciech Zbrożek