angular - 带有 CDK 表/材料设计的表中的单选按钮

Question

我实际上是在尝试在 CDK Table /material design 的表格组件中插入一个单选按钮组。 查看预期图像/结果

https://stackblitz.com/angular/qxkmjjxrlrm?file=app%2Ftable-sticky-header-example.ts

Answer 1

您可以简单地在桌子周围添加单选组，并在单元格内添加单选按钮。这是一个 StackBlitz 示例。

<mat-radio-group [(ngModel)]="selectedElement">

  <table mat-table [dataSource]="dataSource">

    <!-- Selected Column -->
    <ng-container matColumnDef="selected">
      <th mat-header-cell *matHeaderCellDef>
        Selected Element:<br /><b>{{ selectedElement?.name }}</b>
      </th>
      <td mat-cell *matCellDef="let element">
        <mat-radio-button [value]="element">
        </mat-radio-button>
      </td>
    </ng-container>

    ...

  </table>

</mat-radio-button>