如何获取mat-expansion-panel状态？解决TypeError报错问题

报错原因 #

你出错的核心问题有两个：

1. 错误地通过nativeElement访问expanded属性——expanded是Angular Material的MatExpansionPanel组件类自带的属性，不属于原生DOM元素，直接访问组件实例即可。
2. 可能在组件生命周期过早的阶段（比如ngOnInit）访问ViewChild，此时组件实例还未初始化，导致this.linkServices为undefined。

正确解决方案 #

方案1：通过ViewChild直接访问组件属性

首先确保正确导入并声明ViewChild，指定类型为MatExpansionPanel，并在合适的生命周期钩子中访问：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatExpansionPanel } from '@angular/material/expansion';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 用ViewChild获取模板引用的面板组件
  @ViewChild('linkServices') linkServices!: MatExpansionPanel;

  ngAfterViewInit(): void {
    // ngAfterViewInit钩子触发时，ViewChild已完成初始化
    console.log('当前面板状态:', this.linkServices.expanded);
  }

  // 在自定义方法中访问时，建议加判空处理
  checkPanelStatus(): void {
    if (this.linkServices) {
      console.log(this.linkServices.expanded);
    }
  }
}

方案2：通过监听expandedChange事件实时获取状态

如果需要实时监听面板展开/收起的状态变化，可以直接在模板中绑定expandedChange事件：

模板代码：

<mat-expansion-panel #linkServices (expandedChange)="handlePanelChange($event)">
  <mat-expansion-panel-header>
    <mat-panel-title>
      <mat-icon>request_quote</mat-icon>Services
    </mat-panel-title>
    <mat-panel-description>
      Add a service
    </mat-panel-description>
  </mat-expansion-panel-header>
  <!-- 面板内容 -->
</mat-expansion-panel>

组件代码：

handlePanelChange(isExpanded: boolean): void {
  // isExpanded为true表示展开，false表示收起
  console.log('面板状态变化:', isExpanded);
}

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