Question

我有一些问题，比如'什么是什么'和4个radiobuttons作为答案。所以它就像在DOM中生成的3个。但问题是，当我点击某个收音机时，它会在另一个问题中选择收音机:(如何解决这个问题？这是有价值的吗？还是需要一些独特的索引？

代码：

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

Answer 1

添加索引的名称属性库，并在组件中创建答案对象

组件

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

Answer 2

对于ngFor中的每个测试，您应该有不同的ngModel，将您的ngModel更改为

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

Angular 2 ng对于radiobuttons

2 个答案: