从 API 获取值后，如何在 ionic 4 中动态更改多个单选按钮组中的单选按钮值？

Question

这是我从 API 获得的问题列表。我想在 Ionic 4 中的 单选按钮 中显示选项。当我使用 *ngFor="let key of ques; let i = index" 时，它会显示 问题编号 as {{i+1}}) {{key.question}}。我想显示从 option1、option2、option3 中选择的单选按钮值, option4, option5 as answer1 for question1, answer2 for question2 像这样。如何解决？

我有一种情况是从动态创建的单选按钮中选择一个单选按钮。我知道 Radio group 可以，但我仍然无法做到，因为我的情况略有不同。

来自服务器的所有数据都是 json 格式。我用一个问题和四个带有单选按钮的选项动态创建了视图。但我的理解是每一行都是新行，我无法从所有单选按钮中只选择一个单选按钮。每个按钮都是单独选择的，但我只想选择一个单击的单选按钮。 任何帮助将不胜感激。

HTML

<ion-row style="padding:5px;" *ngFor="let key of ques; let i = index">
<ion-text>{{i+1}}) {{key.question}}</ion-text>
<ion-radio-group>
    <ion-item lines=none *ngIf="key.option1!==null">
     <input slot="start" type="radio" value="{{key.option1}}" [(ngModel)]="option1" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black;">{{key.option1}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option2!==null">
     <input slot="start" type="radio" value="{{key.option2}}" [(ngModel)]="option2" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black;">{{key.option2}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option3!==null">
      <input slot="start" type="radio" value="{{key.option3}}" [(ngModel)]="option3" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option3}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option4!==null">
      <input slot="start" type="radio" value="{{key.option4}}" [(ngModel)]="option4" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option4}}</ion-text>
    </ion-item>

    <ion-item lines=none *ngIf="key.option5!==null">
      <input slot="start" type="radio" value="{{key.option5}}" [(ngModel)]="option5" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option5}}</ion-text>
    </ion-item>
</ion-radio-group>

问题

{"questionlist":[
    {"question":"Please note that information...?",
    "option1":"option1",
    "option2":"option2",
    "option3":"option3",
    "option4":"option4",
    "option5":null},
    {"question":"Have you ever had any of the following:",
    "option1":"Diabetes",
    "option2":"Hypertension",
    "option3":"Lung disease",
    "option4":"Heart Disease",
    "option5":"None of the Above"}
]
}

Answer 1

按照文档进行操作。如果您在 ionic 上构建，则应尽可能使用 ionic 4 组件。他们已经在文档 ion-radio-group 和 ion-radio 中提供了所有内容。