mat-expansion-panel 添加下拉打开问题答案

【问题标题】：mat-expansion-panel to added drop down open issuemat-expansion-panel 添加下拉打开问题
【发布时间】：2019-04-01 05:20:41
【问题描述】：

我将 Angular material mat-expansion-panel 添加到 select option ，当我点击选择菜单时，mat-expansion-panel 会自动打开，任何人都知道如何解决这个问题，

Stack blitz example

我的代码

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>

【问题讨论】：

您的问题是什么？请详细描述一下...

标签： css angular angular-material

【解决方案1】：

我没有你描述的问题，但我明白你的意思。发生的情况是，当您单击选择时，您还单击了扩展面板。您可以通过阻止单击通过选择来防止这种行为。

stopPropagation

在您的 HTML 中将选择更改为：

<select class="form-control" id="exampleFormControlSelect1" (click)="$event.stopPropagation()">

【讨论】：

很好的解决方案！， event.stopPropagation() 方法停止将事件冒泡到父元素，防止执行任何父事件处理程序。

【解决方案2】：

您可以尝试以下方法：

<select (click)="$event.stopPropagation();">

【讨论】：

您的解决方案应该是<mat-panel-title (click)="$event.stopPropagation();">

【解决方案3】：

使用stopPropagation 到mat-panel-title

 <mat-panel-title  (click)="$event.stopPropagation();">

See working code

【讨论】：