[英]Closing Angular Mat-Expansion Panel on Click
I have seen a few requests for toggling opened and closed Angular Material, but I am looking to always close it on the button click.我已经看到一些要求切换打开和关闭的 Angular Material,但我希望总是在单击按钮时关闭它。 So if the panel is opened and the button is clicked, then close the panel.因此,如果打开面板并单击按钮,则关闭面板。
Toggle works without any problem, but when I try to always close it (by setting the panelOpenState
to false, it isn't seeming to work for me. Toggle 工作没有任何问题,但是当我尝试始终关闭它时(通过将panelOpenState
设置为 false,它似乎对我不起作用。
In my html I have:在我的 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>
What I am trying to acheive is closing the panel when the div is clicked.我想要实现的是在单击 div 时关闭面板。 To do this, my click event in the ts
file is as shown below:为此,我在ts
文件中的点击事件如下所示:
...
export class SidenavComponent {
panelOpenState: boolean = false;
closePanel() {
this.panelOpenState = false;
}
}
On top of this, I have tried a few different methods within the closePanel()
function.最重要的是,我在closePanel()
函数中尝试了几种不同的方法。 The only method that has successfully worked is the toggle ( this.panelOpenState = !this.panelOpenState
).唯一成功的方法是切换( this.panelOpenState = !this.panelOpenState
)。
How can I always close the panel?如何始终关闭面板? Setting it to false on click does not appear to work.单击时将其设置为 false 似乎不起作用。 The idea for me clicking on the div and having it close is because I want the panel to close any time I go to a different route.我点击 div 并关闭它的想法是因为我希望面板在我去不同的路线时关闭。
We can solve this by using two-way binding on the expanded attribute of mat-expansion-panel.我们可以通过在 mat-expansion-panel 的扩展属性上使用双向绑定来解决这个问题。
<mat-expansion-panel [(expanded)]="panelOpenState">
<mat-expansion-panel-header>
...
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.