Angular Material ui 单选按钮获取值

Question

我在使用 Angular Material UI 单选按钮时遇到问题。在这一点上我需要问一个关于如何获取单选按钮的值的问题似乎很愚蠢，但我似乎无法让它在我正在处理的项目中工作。

在我的项目中，我有一张带有单选按钮的卡片和 3 张带有滑块的卡片来选择一个值。单击卡片时卡片将处于活动状态，当提交表单时，我检查活动的卡片（如果数组 id == 到 selectedIndex，则由鸡检查）并且只传递该值。使用滑块时，效果很好，但使用单选按钮时，我很难将对象数组中的值设置为选中的单选框。

我尝试了不同的方法，例如使用 ngModel 并将其设置为 skillExpArr.value 但这没有用，并添加了一个表单控件 radValue 可以在将值分配给数组之前保存该值。任何人都可以向我解释如何正确地做到这一点？

html

 <mat-card *ngFor="let skillExp of skillExpArr;" [class.active]="selectedIndex === skillExp.id" (click)="selectedIndex = skillExp.id">
                        <div *ngIf="!skillExp.slider ;else slider">


                            <mat-radio-group aria-label="Select an option">
                                <mat-radio-button name="value" value="1" [formControl]="radValue"  >I followed a workshop / <br>
                                    played around with it</mat-radio-button>
                                <mat-radio-button name="value" value="5" [formControl]="radValue"  >Played with it for a week ,<br>
                                    I know the basics</mat-radio-button>
                                <mat-radio-button name="value" value="10"  [formControl]="radValue"   >Two weeks of experience </mat-radio-button>
                                <mat-radio-button name="value" value="20"[formControl]="radValue"   >I have my first solid <br>
                                    month of experience</mat-radio-button>

                            </mat-radio-group>

                        </div>
</mat-card>
 <button mat-flat-button color="primary" (click)="onFormSubmit( skillExpArr[selectedIndex].value )">Add experience</button>

.ts

  radValue = new FormControl('');
  selectedIndex = 0;

  skillExpArr: Array<any> = [
    {
      id: 0,
      level: 'Rookie',
      title: " I'm soooo new to this ",
      value: 0,
      imgPath: '../../../../../assets/JPG/rookie-exp.jpg',
      enabled: false,
      slider: false,
    },  
       ... ]

  onFormSubmit(experience) {
    console.log('form submitted and value = ', expiernece);
    console.log('radio=', this.radValue.value)

  }

Answer 1

将 [(ngModel)]="skillExp.value" 添加到 <mat-radio-group>

希望能帮到你！

Angular Material ui 单选按钮获取值

Angular Material ui radio buttons get value

radio-button

angular-material

angular