如何通过单击按钮切换垫扩展面板？

Question

有什么方法可以通过单击外部按钮来扩展特定的 mat-expansion-panel 吗？

我试过链接到面板的 ID，但没有成功……

 <mat-expansion-panel id="panel1"> ... </>
...
<button (click)="document.getElementById('panel1').toggle()>Click me</button>

例如，这是我的 stackblitz 代码

我最终的计划是使用此方法打开从数组生成的列表中的不同面板： <mat-expansion-panel *ngFor="let d of data"> ...

原文由 physicsboy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的 html 文件中：

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

    <mat-expansion-panel-header>
        <mat-panel-title>
            TITLE
        </mat-panel-title>
    </mat-expansion-panel-header>

    <p>BODY</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

在你的 TS 文件中：

 panelOpenState: boolean = false;

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

如果您使用 *ngFor 生成扩展面板：

 <mat-expansion-panel [expanded]="isOpen" *ngFor="let d of data">
    <mat-expansion-panel-header>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

如果您按下按钮，所有展开的面板都会同时打开。

要使用一个按钮仅打开一个面板，请为每个元素的数据数组添加一个“扩展”属性，如下所示：

   data = [
    {id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false},
    {id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false},
    {id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false},
    {id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false},
  ]

然后在你的模板中：

 <mat-expansion-panel [(ngModel)]="d.expanded"
    [expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl>

    <mat-expansion-panel-header>
        <button (click)="toggle(d.expanded)">TOGGLE</button>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>

</mat-expansion-panel>

以及按钮点击引发的方法：

   toggle(expanded) {
    expanded = !expanded;
  }

原文由 Juan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<mat-expansion-panel [disabled]="true"
                     #mep="matExpansionPanel"
                     *ngFor="let foo of list">
  <mat-expansion-panel-header>
      <button (click)="mep.expanded = !mep.expanded">Toggle</button>
  </mat-expansion-panel-header>

  <p>Text</p>

</mat-expansion-panel>

原文由 bodpad 发布，翻译遵循 CC BY-SA 4.0 许可协议