Angular ngFor 单选按钮答案

【问题标题】：Angular ngFor radio buttonsAngular ngFor 单选按钮
【发布时间】：2019-06-14 19:10:53
【问题描述】：

我有几个问题，例如“什么是东西”和 4 个单选按钮作为答案。所以这就像在 DOM 中生成了 3 个 <ul>s。但问题是，当我单击某个单选按钮时，它会选择另一个问题中的单选按钮。如何解决这个问题？是有价值的东西吗？或者它需要有一些唯一的索引？

代码：

<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>

【问题讨论】：

请参考：stackoverflow.com/questions/44158712/… 这将帮助您解决问题。

标签： javascript angular angular-template-form

【解决方案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 ??

【讨论】：

【解决方案2】：

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

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

【讨论】：

它抓住了答案，但收音机仍然只能检查一个问题
尝试将 ngModel 更改为 answer.radioSelected
试过了，也不行。我认为问题出在 [value] 中，但我没有解决哪个问题；(
对使用 test.question.radio Selected ?? 作为选择结果表示不满，但我更喜欢使用不同的对象，因为这样可以更轻松地处理结果??