Angular Material 单选按钮打开扩展面板

Question

我有一个场景，我正在尝试使用 Material 单选按钮单击事件来触发带有 mat-accordion 控件的关联扩展面板的打开。

最终目标是让用户单击单选按钮，将单选状态显示为“选中”并打开包含所选单选按钮的面板。目前，点击事件正确设置了基础 step 值，但面板本身并未展开。

这是手风琴组件的代码：

<mat-accordion multi hideToggle>
  <mat-expansion-panel id="panel1" [expanded]="step === 0">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <mat-radio-button name="multi-accordion" id="set-step-0" (click)="setStep(0)">
          <span>Panel 1</span>
        </mat-radio-button>
      </mat-panel-title>
    </mat-expansion-panel-header>
    Panel 1 content
  </mat-expansion-panel>
  <mat-expansion-panel id="panel2" [expanded]="step === 1">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <mat-radio-button name="multi-accordion" id="set-step-1" (click)="setStep(1)">
          <span>Panel 2</span>
        </mat-radio-button>
      </mat-panel-title>
    </mat-expansion-panel-header>
    Panel 2 content
  </mat-expansion-panel>
  <mat-expansion-panel id="panel2" [expanded]="step === 2">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <mat-radio-button name="multi-accordion" id="set-step-2" (click)="setStep(2)">
          <span>Panel 3</span>
        </mat-radio-button>
      </mat-panel-title>
    </mat-expansion-panel-header>
    Panel 3 content
  </mat-expansion-panel>
</mat-accordion>

这是我用来完成工作的 .ts 文件：

export class AccordionComponent implements OnInit {
  step = -1;

  constructor() { }

  ngOnInit(): void {
  }

  setStep(index: number) {
    if (index == this.step) { return; }
    console.log('Step before setting index: ', this.step);
    this.step = index;
    console.log('Step after setting index: ', this.step);
  }
}

我不明白为什么点击事件正确设置的值（如 console.log 语句所示）没有被面板上的 [expanded] ="step === n" 绑定本身。

Answer 1

条件 [expanded]="step === 0" 是正确的，但 MatExpansionPanel 的行为似乎会在单击 MatExpansionPanel 时覆盖和切换 expanded 属性，这似乎合乎逻辑手风琴。

为了禁用此行为，我找到的唯一解决方案是在每个 <mat-expansion-panel> 元素上添加 [disabled]="true"：

<mat-expansion-panel id="panel2" [disabled]="true" [expanded]="step === 2">

工作 StackBlitz here

Answer 2

由于 ExpansionPanel 行为覆盖了单选按钮，您可能只想使用带有 div 的单选按钮，如果相应的单选按钮被单击，则有条件地显示。

工作 StackBlitz here

Angular Material 单选按钮打开扩展面板

Angular Material expansion panel open fired by radio button

angular

angular-material