时间戳

首页 > 解决方案 > 获取 Angular Material 单选按钮的选定状态

angular - 获取 Angular Material 单选按钮的选定状态

问题描述

我有一个 Angular Material mat-table，其中包含复选框和行的列，每个都使用 Material 组件。我可以使用 获得复选框的选中状态，row.checked如下所示。如何找到单选按钮的选定状态？

<ng-container matColumnDef="selectCheck">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let row" [ngClass]="row[columnCompare] != valueCompare? 'styled-cell' : null">
    <mat-radio-group [(ngModel)]="row.selected">
      <mat-radio-button (change)="radioSelected(row)"></mat-radio-button>
    </mat-radio-group>
  </td>
</ng-container>

<ng-container matColumnDef="selectRadio">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let row">
    <mat-radio-button (change)="radioSelected(row)"></mat-radio-button>
  </td>
</ng-container>

TS

public radioSelected(row): void {
  //row.checked is undefined here
}

标签： angularangular-material

解决方案

尝试这个。

<ng-container matColumnDef="selectCheck">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let row" [ngClass]="row[columnCompare] != valueCompare? 'styled-cell' : null">
    <mat-radio-group [(ngModel)]="row.selected">
      <mat-radio-button (change)="radioSelected(row)"></mat-radio-button>
    </mat-radio-group>
  </td>
</ng-container>

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

TS

public radioSelected(row): void {
  console.log(row.selected);
}

推荐阅读