单选按钮只能选择一个，因为 *ngFor

Question

我正在尝试制作类似问卷形式的东西，其中包含一些问题和使用单选按钮的多项选择选项。

问题和选项来自 json 文件。

然后我使用嵌套的 ngFor 将每个问题和选项的父项和子项分开。

但看起来我做错了。

ngFor生成的单选按钮只做一个可以在所有按钮中选择的按钮。

当我点击另一个问题的单选按钮时，上一个问题的单选按钮未被选中，就像问题留空一样。

是否可以使单选按钮在单击其他问题的单选按钮时不会从 previous/another 问题中消失？

//data.json

[{
  "surveyid": 101,
  "surveyname": "Vitamin",
  "createdby": "Dr. Sarah",
  "createddate": "16-01-2018",
  "question": [{
      "questionid": 1,
      "questiondesc": "Q-1?",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    },

    {
      "questionid": 2,
      "questiondesc": "Q_2?",
      "qno": 2,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        },
        {
          "options": "C",
          "answer": "Don't know"
        }
      ]
    },

    {
      "questionid": 3,
      "questiondesc": "Q_3",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    }
  ]
}]

<div *ngIf="isVerified" align="left" class="container">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions">
        <div class="radio" class="form-control second-form">
          <input type="radio" name="formValue" value="{{items3.answer}}"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button class="btn btn-sm btn-success">Submit</button>
  </div>
</div>

Answer 1

问题是因为所有无线电输入的名称相同：

name="formValue"

您应该为其他单选按钮组命名。

解法：

name="formValue{{items2.questionid}}"

单选按钮只能选择一个，因为 *ngFor

Radio buttons only one can be chosen because *ngFor

html

json

radio-button

ngfor

angular