使用angular提交后如何获取所选离子单选按钮的值

Posted 2023-03-27

【中文标题】使用angular提交后如何获取所选离子单选按钮的值

【英文标题】：How to get the value of the selected ion radio button after submission using angular

【发布时间】：2021-09-21 16:05:15

【问题描述】：

.html

<ion-radio-group 
    *ngFor="let option of data" 
    (ionChange)="checkValue($event)" 
    [value]="item">
   <ion-item>
       <ion-label>option.optionA</ion-label>
       <ion-radio slot="start" value="Not"></ion-radio>
   </ion-item>   
   <ion-item>
       <ion-label>option.optionB</ion-label>
       <ion-radio slot="start"  value="Some"></ion-radio>
   </ion-item>
   <ion-item>
       <ion-label>option.optionC</ion-label>
       <ion-radio slot="start" value="Most"></ion-radio>
   </ion-item>
   <ion-item>
       <ion-label>option.optionD</ion-label>
       <ion-radio slot="start" value="All"></ion-radio>
   </ion-item>
</ion-radio-group>

<div class="evalbtn">
    <button (click)="print(event)" class="nextbtn" (click)="evaluation2()">
        Submit
    </button>
</div>

.ts

data: any[] = [
  
    "optionA":"Not at All",
    "optionB":"For some of the Time",
    "optionC":"For most of the Time",
    "optionD":"For all of the Time",      
  
];

//function to print what is inputed in the form that is declared above
checkValue(event)  
    console.log(event.detail.value)

 
print(event) 
    console.log(this.checkValue(event))

【问题讨论】：

它是棱角分明的材料，是的，简单的 html 吗？

是的，但我试图用相同的单选按钮选项及其价值创建更多问题，我怎样才能获得所有价值？

【参考方案1】：

为ion-radio-group 添加[(ngModel)] 而不是[value]。

<ion-radio-group *ngFor="let option of data"
    [(ngModel)]="selectedValue"
    (ionChange)="checkValue($event)">
<!-- items -->
</ion-radio-group>

并将selectedValue 添加到您的组件中：

selectedValue: any;

print(event) 
    console.log('Selected value: ', this.selectedValue);

【讨论】：

非常感谢它有效。我尝试使用相同的选项和值提出更多问题，但是一旦我单击一个单选按钮，另一个单选组上的另一组 radion btn 也会被单击。我怎样才能获得所有这些价值？

@yeel 我想，您可以将答案模型添加到您的数据（*ngFor 中的option）。然后你可以使用[(ngModel)]="option.selectedValue"

对不起，我无法理解如何做到这一点“你可以在你的数据中添加一个答案模型（在 *ngFor 中的选项）”，我还是个初学者，可以请你详细说明。谢谢

@yeel data: any[] = [ selectedAnswer: '', "optionA":"Not at All", "optionB":"For some of the Time", "optionC":"For most of the Time", "optionD":"For all of the Time" ];。在这种情况下，每一项数据都会有自己的selectedAnswer。

这就是为什么非常感谢您的帮助。