javascript - Angular ngFor 单选按钮

Question

我有几个问题，比如“什么是东西”和 4 个单选按钮作为答案。所以它就像<ul>DOM 中的 3 个生成的 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>

Answer 1

添加 index 的 name 属性 base 并在组件中创建一个 answer 对象

零件

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

Answer 2

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

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