在扩展模式下如何隐藏垫子扩展面板标题答案

【问题标题】：how to hide mat expansion panel header when in expanded mode在扩展模式下如何隐藏垫子扩展面板标题
【发布时间】：2018-12-15 07:54:11
【问题描述】：

我在一个页面上有多个垫子扩展面板，我希望当我扩展一个面板时，它的标题显示隐藏。

HTML

<mat-expansion-panel 
  class="z-depth-5" 
  (opened)="panelOpenState = true" 
  (closed)="panelOpenState = false">
  <mat-expansion-panel-header 
    [collapsedHeight]="customCollapsedHeight"       
    [expandedHeight]="customExpandedHeight">
  </mat-expansion-panel-header>
</mat-expansion-panel>

CSS

.mat-expansion-panel.mat-expanded {
  position: fixed;
  padding: 0;
  top: 0px;
  left: 60px;
  right: 0px;
  bottom: 0px;
  z-index: 100;
}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在你的 mat-expansion-panel-header 中使用 *ngIf 指令。

<mat-expansion-panel-header *ngIf="!panelOpenState 
[collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight">
</mat-expansion-panel-header>

【讨论】：

【解决方案2】：

mat-expansion-panel 具有 opened 和 closed @Output() 属性，您可以使用它们来跟踪当前在模板中打开的项目。你已经在使用它们了。

对于这些方法，你可以传入手风琴列表中当前打开/关闭项的index。

有了这个，你可以在你的组件中设置一个属性来跟踪它。

如果是opened，请设置该属性。在closed的情况下，检查当前点击的item index是否等于class上设置的index。如果是这样，请将类属性重置为 -1。

在代码中，这将转换为：

import {Component} from '@angular/core';

@Component({...})
export class ExpansionOverviewExample {
  currentlyOpenedItemIndex = -1;

  items = [...];

  setOpened(itemIndex) {
    this.currentlyOpenedItemIndex = itemIndex;
  }

  setClosed(itemIndex) {
    if(this.currentlyOpenedItemIndex === itemIndex) {
      this.currentlyOpenedItemIndex = -1;
    }
  }

}

在模板中，你可以有这样的东西：

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let item of items; let i = index;"
    (opened)="setOpened(i)"
    (closed)="setClosed(i)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{ item.header }}
      </mat-panel-title>
      <mat-panel-description>
        {{ item.description }} | {{ currentlyOpenedItemIndex === i ? 'Close' : 'Open' }}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>{{ item.content }}</p>
  </mat-expansion-panel>
</mat-accordion>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：