代码之家  ›  专栏  ›  技术社区  ›  Arthur Decker

如何使用角材质使用手风琴选择单选按钮

  •  0
  • Arthur Decker  · 技术社区  · 6 年前

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

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

    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>
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Arthur Decker    6 年前

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

    这起作用了

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