Question

您好我正在尝试使用手风琴循环播放数组，但我希望用户使用单选按钮选择值。我已经添加了单选按钮但是我想要一个逻辑来在检查任何按钮时取消选中所有按钮。

我想出了这个逻辑，但后来我无法选择其他单选按钮

onChange(event) {
    if (event.source.id) {
        event.source.checked = false;
    }
  }

有人可以帮帮我吗？

     <mat-accordion>
  <mat-expansion-panel *ngFor="let dialog of dialogInfo let i = index" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-radio-group >
        <mat-radio-button (change)="onChange($event)" [name]=i [id]=i [value]="dialog">
          <mat-panel-title>{{dialog.lineone}}{{selected}}</mat-panel-title>
        </mat-radio-button>
      </mat-radio-group>
    </mat-expansion-panel-header>
    <mat-list>
      <mat-divider></mat-divider>
      <mat-list-item>{{dialog.city}}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>{{dialog.state}}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>{{dialog.zip}}-{{dialog.linetwo}}</mat-list-item>
    </mat-list>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

问题是因为我将单选按钮包装在一个组

中

这有效

 <mat-accordion>
  <mat-expansion-panel *ngFor="let dialog of dialogInfo let i = index" hideToggle="true">
    <mat-expansion-panel-header>
        <mat-radio-button (change)="onChange($event)" [name]=i [id]=i [value]="dialog">
          <mat-panel-title>{{dialog.lineone}}{{selected}}</mat-panel-title>
        </mat-radio-button>
    </mat-expansion-panel-header>
    <mat-list>
      <mat-divider></mat-divider>
      <mat-list-item>{{dialog.city}}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>{{dialog.state}}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>{{dialog.zip}}-{{dialog.linetwo}}</mat-list-item>
    </mat-list>
  </mat-expansion-panel>
</mat-accordion>

如何使用角度材料选择使用手风琴的单选按钮

1 个答案: