Неправильное поведение при проверке переключателей в Loop (с использованием Angular2)

Question

Я работаю над проектом Angular2 & В настоящее время я застрял с модулем Quizz, что иллюстрирует проблему; когда кандидат хочет пройти тест, он получит этот тест с некоторыми вопросами; каждый вопрос имеет 4 предложения с переключателями, и он должен отвечать, просто проверяя один из них на каждый вопрос. вот фрагмент кода HTML, что я говорю:

<div *ngFor="#qt of listQuestion"> 

<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3> 

     <div class="uk-accordion-content"> 

      <input type="radio" id="radio_demo_1" /> 

      <label for="radio_demo_1"> <b>{{qt.lpo[0]}}</b></label> <br><br> 

      <input type="radio" id="radio_demo_2" /> 

      <label for="radio_demo_2"><b>{{qt.lpo[1]}}</b></label><br><br> 

      <input type="radio" id="radio_demo_3" /> 

      <label for="radio_demo_3"> <b>{{qt.lpo[2]}}</b></label> <br><br> 

      <input type="radio" id="radio_demo_4" /> 

      <label for="radio_demo_4"><b>{{qt.lpo[3]}}</b></label> 


            </div> </div> 

Где listQuestion список Вопрос сущностей, которые каждый из них имеет wording и список предложений (lpo), таким образом я не может проверить только одну кнопку радио для каждого вопроса, как показано ниже: Я попытался удалить id в <input> tags и она по-прежнему та же проблема, я изменил id на name и дать же имя для всех тегов я мог проверить только одно предложение bu t, переходя к другому вопросу и проверяя новое предложение, первый будет очищен. Любая помощь Пожалуйста?

Answer 1

Ваша проблема в том, что, как вы это делаете сейчас, у вас есть одна группа радиостанций по всем вопросам. Вы можете решить это, создав атрибуты радио элемента name динамически. Что-то вроде этого:

<h3 class="uk-accordion-title" >{{qt.id}}</h3> 

     <input type="radio" id="radio_demo_{{qt.id}}_{{index$}}" name="radio_demo_{{qt.id}}_{{index$}}" /> 

     <label for="radio_demo_{{qt.id}}_{{index$}}"> <b>{{qt.lpo[0]}}</b></label> <br><br> 

{{}} qt.id (или любой другой кварты свойство, которое однозначно идентифицирует этот вопрос) является ключевым здесь.

Таким образом, у вас будет отдельная группа радиостанций для каждого вопроса, так как имена групп не будут пересекаться.