Угловой 2 нгДля радиокнопок

Question

У меня есть несколько вопросов, таких как "что-то" и 4 радиокнопки в качестве ответов. Так что это как 3 сгенерированных UL в DOM. Но проблема в том, что когда я нажимаю на какое-то радио, оно выбирает радио в другом вопросе:(Как решить эту проблему? Это что-то со значением? Или у него должен быть какой-то уникальный индекс?

Код:

<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

Answer 2

Вы должны иметь разные ngModel для каждого теста в ngFor, измените ngModel на

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