Angular ngFor 单选按钮

Question

我有几个像“什么是某东西”的问题，以及4个单选按钮作为答案。因此，DOM中会生成3个<ul>。但问题是，当我点击某个单选按钮时，它会选择另一个问题的单选按钮。如何解决这个问题？是值的问题吗？还是需要一些唯一的索引？

代码：

<ul *ngFor="let test of tests"> {{test.question.title}}
    <li *ngFor="let answer of test.question.answers"> <input type="radio" [value]="answer" [(ngModel)]="radioSelected"> <label for="">{{answer}}</label> </li>
</ul>

<button (click)="check(radioSelected)">Send</button>

- Jack Rassel

---

请参考此链接：https://dev59.com/RqLia4cB1Zd3GeqPcQPg 这将帮助您解决问题。 - Gourav Pokharkar

Answer 1

在组件中根据索引添加name属性，并创建一个答案对象。

组件

answers = {}; // 

模板（视图）

<ul *ngFor="let test of tests;let index = index"> {{test.question.title}}
    <li *ngFor="let answer of test.question.answers"> 
       <label >
         <input [name]="index" type="radio" [value]="answer" [(ngModel)]="answers[index]"> 
         {{answer}}</label> 
    </li>
</ul>

<button (click)="check(answers)">Send</button>

stackblitz demo

- Muhammed Albarmavi

Answer 2

你应该在ngFor中为每个测试使用不同的ngModel，将你的ngModel更改为

<input type="radio" [value]="answer" [(ngModel)]="test.question.radioSelected">

- NTP

---

它能捕捉到答案，但是单选框仍然只能在一个问题上被选中。 - Jack Rassel

尝试将ngModel更改为answer.radioSelected。 - NTP

尝试过了，但是不起作用。我认为问题在于[value]，但具体是什么问题我没能解决；( - Jack Rassel

我同意您关于使用 test.question.radioSelected 作为选择结果的想法，但我更喜欢使用不同的对象，因为这样会使处理结果更容易。 - Muhammed Albarmavi