Angular Material Accordion 基于单选按钮值打开/关闭答案

【问题标题】：Angular Material Accordion open/close based on Radio button valueAngular Material Accordion 基于单选按钮值打开/关闭
【发布时间】：2020-04-28 15:02:10
【问题描述】：

我正在尝试将mat-accordion 与一组单选按钮一起使用，每个面板一个。如果选择了单选按钮，请展开该面板，关闭其他面板并按预期取消选择其他单选按钮。

我的单选按钮按预期工作，但面板在单击时正常展开和收缩；我试图让它们仅在选中其单选按钮时才展开。

我已尝试禁用面板，但这会禁用其内容，包括单选按钮。

我怎样才能让它只根据其单选按钮状态展开/折叠？

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

【问题讨论】：

标签： javascript html angular angular-material material-design

【解决方案1】：

Stackblitz demo

您必须禁用mat-expansion-panel（它仍然可以通过编程方式打开）。此外，您必须修复一些 CSS 样式，因为由于某种原因，当您单击单选按钮时，它会向上移动。所以让我们从样式开始：

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

现在将 css 类应用到手风琴元素：

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

【讨论】：