在循环中检查单选按钮时的错误行为(使用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，它仍然是相同的问题，我通过name更改了id，并为所有标记指定了同名，因此，我只能检查一个命题，但当移到另一个问题并检查一个新命题时，第一个命题将被清除。有什么帮助吗？

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属性)是此处的关键。

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