仅在单击按钮时打开垫子扩展面板

Question

有没有一种方法可以使我的垫子扩展面板打开仅在单击某个按钮时？

我正在考虑提供一个信息列表，可以单击一个编辑图标，这将导致扩展发生，从而显示出编辑选项...

当然，我不希望该面板在随机单击该行时扩展，而只在编辑图标上...

Answer 1

您需要将以下代码添加到styles.css文件中：

span.mat-expansion-indicator
{
   pointer-events: visiblefill !important; 
}

mat-expansion-panel-header 
{
   pointer-events: none;
}

Answer 2

#HTML代码：

<mat-expansion-panel [expanded]="panelOpenState">

<mat-expansion-panel-header>
    <mat-panel-title>
        Edit
    </mat-panel-title>
</mat-expansion-panel-header>
<p>Edit Body</p>
</mat-expansion-panel>

<button (click)="togglePanel()">Edit</button>

#TS代码：

panelOpenState: boolean = false;

togglePanel() {
this.panelOpenState = !this.panelOpenState
}