Question

我在页面上有多个席子扩展面板，我希望在扩展面板时其标题显示为隐藏。

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;
}

Answer 1

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

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

Answer 2

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

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

以此，您可以在Component中设置一个属性以对其进行跟踪。

对于opened，请设置该属性。对于closed，请检查当前单击的项目索引是否等于该类上的设置索引。如果是这样，请将class属性重置为-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。

在展开模式下如何隐藏垫子展开面板标题

2 个答案: