我正在尝试制作类似调查表的表格,其中包含一些问题以及使用单选按钮的多项选择选项。
问题和选项来自json文件。
然后,我使用嵌套的ngFor分别为每个问题和选项分配父级和子级。
但是看起来我做错了。
ngFor产生的单选按钮只能使其中一个可以选择。
当我单击另一个问题的单选按钮时,上一个问题的单选按钮不会像问题留为空白那样被选中。
单击另一个问题的单选按钮时,是否可以使单选按钮不从上一个/另一个问题消失?
//data.json
[{
"surveyid": 101,
"surveyname": "Vitamin",
"createdby": "Dr. Sarah",
"createddate": "16-01-2018",
"question": [{
"questionid": 1,
"questiondesc": "Q-1?",
"qno": 1,
"alloptions": [{
"options": "A",
"answer": "Yes"
},
{
"options": "B",
"answer": "No"
}
]
},
{
"questionid": 2,
"questiondesc": "Q_2?",
"qno": 2,
"alloptions": [{
"options": "A",
"answer": "Yes"
},
{
"options": "B",
"answer": "No"
},
{
"options": "C",
"answer": "Don't know"
}
]
},
{
"questionid": 3,
"questiondesc": "Q_3",
"qno": 1,
"alloptions": [{
"options": "A",
"answer": "Yes"
},
{
"options": "B",
"answer": "No"
}
]
}
]
}]
<div *ngIf="isVerified" align="left" class="container">
<div *ngFor="let items of jsonData">
<div *ngFor="let items2 of items.question">
<label>{{items2.questionid}}. {{items2.questiondesc}}</label>
<div *ngFor="let items3 of items2.alloptions">
<div class="radio" class="form-control second-form">
<input type="radio" name="formValue" value="{{items3.answer}}"><b>{{items3.options}}</b>. {{items3.answer}}
</div>
</div><br>
</div>
</div>
<div align="center">
<button class="btn btn-sm btn-success">Submit</button>
</div>
</div>
问题是因为所有无线电输入的名称相同:
name="formValue"
您应该为其他单选按钮组命名不同。
解决方案:
name="formValue{{items2.questionid}}"
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句