Question

我有一个带有单选按钮列的动态Angular材质mat-table。如何使所有单选按钮都位于同一mat-radio-group中？以下模板每行产生一组，因此单选按钮彼此无关，可以一次检查多个。

<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8 table">

  <ng-container matColumnDef="selectRadio">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <mat-radio-group [(ngModel)]="row.selected" (change)="radioSelected(row)">
        <mat-radio-button [value]="true"></mat-radio-button>
      </mat-radio-group>
    </td>
  </ng-container>

  <ng-container *ngFor="let column of columnSchema" [matColumnDef]="column.column">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.title}}</th>
    <td mat-cell *matCellDef="let element">
      {{element[column.column]}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

Answer 1

您已使用[(ngModel)]="row.selected"。这里row.selected对于所有行都是不同的。如果您想为整个桌子放一个收音机，则在TS中取一个变量。并在[(ngModel)]中使用该变量。并且可以将row用作单选值，这样您将在新定义的变量中获得选定的行。

例如。

HTML

<mat-radio-group [(ngModel)]="selectedRow" (change)="radioSelected()">
    <mat-radio-button [value]="row"></mat-radio-button>
</mat-radio-group>

TS

selectedRow;

radioSelected() {
  console.log(selectedRow);
}

Answer 2

仅在mat-cell单元中插入mat-radio按钮，例如示例，没有mat-radio-group

 <mat-cell *matCellDef="let row">
     <mat-radio-button style="margin-bottom: 12px;" [value]="true" (change)="radioSelected($event, row)"></mat-radio-button>
 </mat-cell>

要从选定的行中获取信息，请使用此方法

radioSelected = (event: MatRadioChange, row: **object in table**) => {
    console.log(event);
    console.log(row);
  }

我正在对此进行测试并使其完美。在每一行中选择收音机，然后在另一行中取消选择。

垫台中的角材料垫单选按钮

2 个答案: