在Angular中如何隐藏mat-expansion-panel组件？

你可以根据使用场景选择以下两种方案实现需求：

• 方案1：使用*ngIf结构指令
  该方案会直接将面板组件从DOM树中移除，适合不需要保留面板内部状态的场景，代码示例如下：

  <!-- 替换yourArray为你自己绑定的数组变量 -->
  <mat-expansion-panel *ngIf="yourArray?.length > 0">
    <mat-expansion-panel-header>
      <mat-panel-title>
        示例标题
      </mat-panel-title>
    </mat-expansion-panel-header>
    <!-- 面板内容 -->
    <div *ngFor="let item of yourArray">
      {{ item }}
    </div>
  </mat-expansion-panel>
  

  代码中使用的可选链运算符?.可以避免数组为undefined/null时读取length属性报错。

• 方案2：使用[hidden]属性绑定
  该方案仅隐藏面板，组件依然保留在DOM中，适合需要保留面板内部状态（比如已展开状态、表单输入内容）的场景，代码示例如下：

  <mat-expansion-panel [hidden]="!yourArray?.length">
    <!-- 面板内容 -->
  </mat-expansion-panel>
  

  如果项目全局样式重置了hidden属性的默认显示规则，可以添加以下样式确保隐藏效果生效：

  mat-expansion-panel[hidden] {
    display: none !important;
  }
  

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