Here are some questions I have listed below.
public QandAList = [
{
question:{
id: "Q1",
query:"What is the capital of France?"
},
options:[
{
id: "opt1",
text: "Paris"
},
{
id: "opt2",
text: "Berlin"
}
],
selected:{
id:"",
text:""
}
},
{
question:{
id: "Q2",
query:"Who wrote 'Romeo and Juliet'?"
},
options:[
{
id: "opt1",
text: "William Shakespeare"
},
{
id: "opt2",
text: "Jane Austen"
}
],
selected:{
id:"",
text:""
}
}
];
The goal is to display the questions with options as radio buttons. The selected option's ID should be assigned to "selected.id" for each question when chosen.
Below is the HTML code:
<div *ngFor="let QA of QandAList">
{{QA.question.query}}
<br>
<div *ngFor="let opt of QA.options">
<input type="radio" value="{{opt.id}}" [(ngModel)]="QA.selected.id">{{opt.text}}
<br>
</div>
{{QA.selected | json}}
<br>
<br>
</div>
However, an issue arises where selecting an option for the first question also selects the corresponding option for the second question and vice versa.
https://i.sstatic.net/Yz0Cz.png
What could possibly be causing this problem?