Question

我有一个json数组，类似于：

questions = 
 [
    {
       title: Your section is?
       choices: [
                   {
                      id: 1,
                      label: "TestA"
                   },
                   {
                      id=2,
                      label: "TestB"
                   }
                ]
    },
    {
       title: Your major is?
       choices: [
                   {
                      id=3,
                      label: "Medicine"
                   },
                   {
                      id=4,
                      label: "Engineering"
                   }
                ]
    }
 ]

我的HTML：

<div *ngFor="let choice of questions">
   <div *ngFor="let choice of questions.choices;let i=index">
    <div class="radio-group" (click)="onSelectChoice(choice.id)">
      <input type="radio" class="hide" name="choiceElements" [value]="choice.id" id="choice.label" formControlName="choiceElements">
      <label [class.selected]="choice.id === selctedRadio" for="{{choice.label}}" class="" >{{choice.label}}</label>
    </div>
  </div>
</div>

我的TS：

selctedRadio: '';
onSelectChoice(selctedChoice: any){
  this.selctedRadio = selctedChoice;
}

所以，在html中我需要两个问题，每个问题有两个按钮，对于每个问题，我应该能够选择一个单选按钮。但在我的情况下，我只能选择一个单选按钮，当我转到第二个问题时，所选的第一个问题将被取消选中。让我知道如何从每个问题中选择一个无线电答案。

Answer 1

您的单选按钮必须具有相同的名称当且仅当属于同一组时。

您必须找到一种创建每组唯一名称的方法。

顺便说一下，这不是特定于角度的，它只是单选按钮如何在纯HTML中工作。

但是，有关如何处理角度单选按钮的更多信息，您可以检查： Angular2 ReactiveFormsControl: how to bind radio buttons? Angular2 - Radio Button Binding

如何让多个单选按钮在angular2中工作？

1 个答案: