Angular Material Accordion 基於單選按鈕值打開/關閉

Question

我正在嘗試使用帶有一組單選按鈕的mat-accordion ，每個面板一個。 如果選擇了單選按鈕，請展開該面板，關閉其他面板並按預期取消選擇其他單選。

我的單選按鈕按預期工作，但面板在點擊時正常展開和收縮； 我試圖讓他們僅在選中他們的單選按鈕時才展開。

我嘗試禁用面板，但這會禁用其內容，包括單選按鈕。

我怎樣才能讓它僅根據其單選按鈕 state 展開/折疊？

  <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 樣式，因為由於某種原因，當您單擊單選按鈕時，它會向上移動。 那么讓我們從styles開始吧：

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

現在將 css class 應用於手風琴元素：

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

您必須通過添加disabled屬性來禁用面板，並在每個面板上放置一個模板引用變量，以便我們可以通過單擊單選按鈕將它們作為 arguments 傳遞：

<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();
}