Question

我已经看到一些切换打开和关闭Angular Material的请求，但是我希望始终在单击按钮时将其关闭。因此，如果打开面板并单击按钮，则关闭面板。

Toggle可以正常工作，但是当我尝试始终关闭它时（通过将panelOpenState设置为false，似乎对我来说不起作用。

在我的html中，我有：

<mat-expansion-panel [expanded]="panelOpenState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Workouts
      </mat-panel-title>
    </mat-expansion-panel-header>
   <a href="#">Create Workout</a>
  </mat-expansion-panel>

  <div>
    <div (click)="closePanel()">
      <h2>Training Plans </h2>
    </div>
  </div>

我要达到的目的是在单击div时关闭面板。为此，我在ts文件中的点击事件如下所示：

...
export class SidenavComponent {
  panelOpenState: boolean = false;

  closePanel() {
    this.panelOpenState = false;
  }
}

最重要的是，我在closePanel()函数中尝试了几种不同的方法。唯一有效的方法是切换（this.panelOpenState = !this.panelOpenState）。

如何始终关闭面板？单击将其设置为false似乎无效。我单击div并将其关闭的想法是因为我希望在转到其他路线时随时关闭面板。

Answer 1

我们可以通过在mat-expansion-panel的expand属性上使用双向绑定来解决此问题。

<mat-expansion-panel [(expanded)]="panelOpenState">
    <mat-expansion-panel-header>
    ...
    ...

单击时关闭角垫扩展面板

1 个答案: