Angular Material Accordion открывать / закрывать в зависимости от значения переключателя

Question

Я пытаюсь использовать mat-accordion с группой переключателей, по одному на панель. Если выбран переключатель, разверните эту панель, закройте остальные и отмените выбор другого рад ios, как и ожидалось.

Переключатели работают нормально, но панели расширяются и убираются при нажатии как обычно ; Я пытаюсь заставить их расширяться, только если установлен переключатель.

Я пытался отключить панель, но при этом отключается ее содержимое, включая переключатель.

Как сделать так, чтобы он разворачивался / разворачивался только в зависимости от состояния переключателя?

  <mat-accordion hideToggle="true">
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-radio-button
          (change)="onChange($event)"
          name="services"
          id="service1"
          value="service1"
        >
          <mat-panel-title> Service 1</mat-panel-title>
        </mat-radio-button>
      </mat-expansion-panel-header>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, possimus
      aliquam sunt dolorem nam saepe esse laboriosam eius quae quaerat!
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-radio-button
          (change)="onChange($event)"
          name="services"
          id="service2"
          value="service2"
        >
          Service 2</mat-radio-button
        >
      </mat-expansion-panel-header>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, possimus
      aliquam sunt dolorem nam saepe esse laboriosam eius quae quaerat!
    </mat-expansion-panel>
  </mat-accordion>
  {{ selectedService }}

и компонента:

  selectedService = 'service1';

  onChange(event) {
    event.source.checked = true;
    this.selectedService = event.source.value;
  }

Answer 1

Демонстрация Stackblitz

Вам придется отключить mat-expansion-panel (его все равно можно открыть программно). Кроме того, вам нужно исправить стиль CSS, потому что по какой-то причине переключатель переключается вверх при нажатии на него. Итак, давайте начнем со стилей:

.fix-radio-position .mat-expansion-panel
.mat-expansion-panel-header mat-panel-description 
.mat-radio-button {
  line-height: 2;
}

Теперь примените класс css к элементу accordion:

<mat-accordion class="fix-radio-position" hideToggle="true">
...
</mat-accordion>

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

<mat-expansion-panel #panel1 disabled>
...
</mat-expansion-panel>

<mat-expansion-panel #panel2 disabled>
...
</mat-expansion-panel>

Немного измените сигнатуру события onChange, чтобы вы могли передать родительская панель в качестве параметра:

<mat-radio-button (change)="onChange($event, panel1)">Service 1</mat-radio-button>
...
<mat-radio-button (change)="onChange($event, panel2)">Service 2</mat-radio-button>

Наконец, ваш метод onChange становится:

onChange(radio: MatRadioChange, panel: MatExpansionPanel) {
  panel.open();
}