如何防止垫子扩展面板关闭？

Question

我的页面中有 matAccordion，其中面板的数量是动态的。每个面板都包含一个表单。我想防止我的小组关闭，直到表格正确填写并有效为止。

我找不到任何阻止面板关闭的事件。 “（关闭）”事件在面板关闭动画发生后触发。

是否有一些逻辑来控制关闭？

Answer 1

有简单的解决方案

您的组件.html

...
<mat-expansion-panel [opened]="panelOpened($event)">
    <mat-expansion-panel-header [ngClass]="(isPanelOpened)?'no-events':'default'">...</mat-expansion-panel-header>
</mat-expansion-panel>
...

你的组件.ts

...
isPanelOpened: boolean = false;
...
panelOpened(event) {
    this.isPanelOpened = true;
}

submitForm() {
    // submit form stuff
    ...
    // at the end
    this.isPanelOpened = false;
}
...

你的组件.css

.no-events {
    pointer-events: none;
}

.default {
    pointer-events: auto;
}

在第一个面板打开时，它会将

isPanelOpened

更改为 true，从而删除垫面板上的事件触发器。这意味着用户在提交表单之前无法关闭它。在

submitForm()

结束时，您将

isPanelOpened

切换为 false，允许用户关闭面板。

Answer 2

向 CSS 添加一个类，该类具有禁用指针事件的规则：

.disabled-pointer {
  pointer-events: none;
}

然后有条件地将此类添加到您的

mat-expansion-panel-header

，例如：

<mat-expansion-panel-header [class]="formIsValid ? 'disabled-pointer' : ''">
    <mat-panel-title>Panel title</mat-panel-title>
</mat-expansion-panel-header>

要隐藏标题中的切换图标，请将

hideToggle

属性有条件地添加到

mat-accordion

，例如：

<mat-accordion [hideToggle]="formIsValid ? true : false">
    ...
</mat-accordion>

Answer 3

  <mat-expansion-panel [expanded]="!formSubmited$ | async"></mat-expansion-panel>

Answer 4

您可以向元素添加单击事件（可能是 mat-expansion-panel-header）并为此 stopPropagation。

这是代码：

<mat-expansion-panel hideToggle (click)="$event.stopPropagation();">

Answer 5

您必须在 ngFor 指令中添加 trackBy 并解析

<mat-expansion-panel *ngFor="let pack of packs; trackBy: trackByPackId">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{pack.name}}
      </mat-panel-title>
      <mat-panel-description>
        {{pack.devices.length}} Devices
      </mat-panel-description>
    </mat-expansion-panel-header>
   
  
 
  </mat-expansion-panel>

在你的组件中

  trackByPackId = (index, pack) => pack.id;