突出显示扩展面板中面板上的单选按钮

Question

我已经在expansion-panel的每个accordion中放置了单选按钮，如下所示：

我想在单击特定的展开面板时突出显示比率按钮，如果我关闭面板，则突出显示应为：

注意：：我想突出显示单选按钮，仅在单击面板时，而不是单击单选按钮。

Stackblitz DEMO

Answer 1

这是将复选框更改为面板状态的简便方法。

<mat-accordion>
  <mat-expansion-panel #panel1>
    <mat-expansion-panel-header >
      <mat-panel-title>

         <mat-radio-button [checked]="panel1.expanded">Panel 1</mat-radio-button>
      </mat-panel-title>
    </mat-expansion-panel-header>
              Panel 1 comes here
  </mat-expansion-panel>
  <mat-expansion-panel  #panel2>>
    <mat-expansion-panel-header>
        <mat-panel-title>
         <mat-radio-button [checked]="panel2.expanded"> Panel 2</mat-radio-button>
        </mat-panel-title>
    </mat-expansion-panel-header>
                  Panel 2 comes here
  </mat-expansion-panel>
   <mat-expansion-panel  #panel3>
    <mat-expansion-panel-header>
        <mat-panel-title>
                <mat-radio-button [checked]="panel3.expanded">Panel 3</mat-radio-button>
        </mat-panel-title>
    </mat-expansion-panel-header>
                  Panel 3 comes here
  </mat-expansion-panel>
</mat-accordion>

工作副本在这里-https://stackblitz.com/edit/angular-uhuunt-flryaz

Answer 2

也许您可以尝试这样的事情？我只添加了第一个...

    <mat-expansion-panel>
     <mat-expansion-panel-header >
       <mat-panel-title (click)="ww.checked=!ww.checked" >
        <mat-radio-button checked="false" #ww>Panel 1</mat-radio-button>
       </mat-panel-title>
       </mat-expansion-panel-header>
          Panel 1 comes here
       </mat-expansion-panel>

https://stackblitz.com/edit/angular-uhuunt-2r2pf3