带有CDK表/材质设计的表中的单选按钮

Question

我实际上正在尝试在CDK Table / material design的表组件中插入单选按钮组。 See Expected Image /Result

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

Answer 1

您只需在表格周围添加单选组，然后在单元格内添加单选按钮。 Here's a StackBlitz example。

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