我需要将 mat-button-toggle 更改为单选按钮？答案

【问题标题】：I need to change mat-button-toogle to radio button?我需要将 mat-button-toggle 更改为单选按钮？
【发布时间】：2020-01-16 18:27:59
【问题描述】：

您好，我是 Angular 新手，我需要将以下代码更改为单选按钮。

<div class="col-4">
    <div class="label-icon"><label><b>Certfication Required</b></label>

    </div>
    <div>
        <mat-button-toggle-group aria-label="cert req" name="certification" [(ngModel)]="modalData.certificationReq">
            <mat-button-toggle [value]="true" [disableRipple]="true">Yes</mat-button-toggle>
            <mat-button-toggle [value]="false" [disableRipple]="true">No</mat-button-toggle>
        </mat-button-toggle-group>
    </div>

</div>

认证版本需要添加输入框。

【问题讨论】：

标签： angular

【解决方案1】：

更改您的切换组代码，如下所示，

<div>
   <mat-radio-group aria-label="cert req" name="certification" 
      [(ngModel)]="modalData.certificationReq">
     <mat-radio-button [value]="true">Yes</mat-radio-button>
     <mat-radio-button [value]="false">No</mat-radio-button>
   </mat-radio-group>
</div>

【讨论】：

【解决方案2】：

在你的.html中：

<label class="radio-group">Certification</label>
<mat-radio-group class="radio" color="primary">
  <ng-container *ngFor="let option of options">
    <mat-radio-button class="radio-button col-md-3"  [value]="option.value">{{option.name}}</mat-radio-button>
  </ng-container>
</mat-radio-group>

在您的 .ts 中：

options = [{name: 'Yes', value: '1'}, {name: 'No', value: '0'}]

【讨论】：