mat-extension-panel для добавления выпадающего открытого выпуска

Question

Я добавил Угловой материал мат-расширительная панель до опция выбора , когда я нажимаю меню выбора, мат-расширительная панель автоматически открывается, Кто-нибудь знает, как решить эту проблему,

Пример блиц-стека

Мой код

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>

Answer 1

У меня нет проблемы, которую вы описываете, но я понимаю, что вы имеете в виду. Что происходит, когда вы нажимаете на кнопку выбора, вы также нажимаете на панель расширения. Вы можете предотвратить это, запретив клику проходить через select.

stopPropagation

В вашем HTML измените выбор на:

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

Answer 2

Использование stopPropagation до mat-panel-title

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

См. Рабочий код

Answer 3

Вы можете попробовать следующее:

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