检查循环中的单选按钮时的错误行为（使用Angular2）

Question

我正在开展一个Angular2项目＆amp;目前我坚持使用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并提供相同的名称对于所有标签因此，我只能检查一个命题但是当转移到另一个问题并检查一个新命题时，第一个将被清除。 有什么帮助吗？

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}} （或唯一标识问题的任何其他 qt 属性）是此处的关键。

这样，每个问题都会有一个单独的广播组，因为组名不会相交。