單擊時關閉 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>
    ...
    ...