Радиокнопка внутри стола с CDK Table / Material Design

На самом деле я пытаюсь вставить группу переключателей в компонент таблицы CDK Table / material design. См. ожидаемое изображение / результат

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


angular angular-material mat angular-cdk
person Myjay1516    schedule 02.10.2018    source источник
comment
в чем проблема?   -  person Alien    schedule 02.10.2018
comment
Я хочу использовать переключатели вместо флажка. См. Это изображение i.stack.imgur. com / yTpOp.png   -  person Myjay1516    schedule 02.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете просто добавить свою радиогруппу вокруг стола и добавить радиокнопки внутри своих ячеек. Вот пример 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>
person G. Tranter    schedule 02.10.2018