单击时关闭 Angular Mat-Expansion 面板

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 的扩展属性上使用双向绑定来解决这个问题。

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