我在选择选项中添加了 Angular material mat-expansion-panel ,当我单击选择菜单时,mat-expansion-panel是自动打开的,任何人都知道如何解决该问题
我的代码
component.html
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</mat-panel-title>
<mat-panel-description>
Type your name and age
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age">
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
Self aware panel
</mat-panel-title>
<mat-panel-description>
Currently I am {{panelOpenState ? 'open' : 'closed'}}
</mat-panel-description>
</mat-expansion-panel-header>
<p>I'm visible because I am open</p>
</mat-expansion-panel>
</mat-accordion>
答案 0 :(得分:2)
我没有您描述的问题,但我理解您的意思。发生的是,当您单击选择时,您还单击了扩展面板。您可以通过阻止点击通过选择来防止这种行为。
stopPropagation
在HTML中,将选择更改为:
<select class="form-control" id="exampleFormControlSelect1" (click)="$event.stopPropagation()">
答案 1 :(得分:1)
您可以尝试以下操作:
<select (click)="$event.stopPropagation();">
答案 2 :(得分:1)
使用stopPropagation
到mat-panel-title
<mat-panel-title (click)="$event.stopPropagation();">