Question

我正在尝试制作类似问卷的表格，其中包含一些问题以及使用单选按钮的多项选择选项。

问题和选项来自json文件。

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

但看起来我做错了。

由ngFor产生的单选按钮只能制作一个可以从中选择的单选按钮。

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

当单击其他问题的单选按钮时，是否可以使单选按钮不会偏离上一个/另一个问题？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h2>This is my file upload page</h2>
  <table>
    {% for item in data %}
    <tr>
      <td>{{item[0]}}</td>
    </tr>
    {% endfor %}
  </table>  

</body>
</html>

//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"
        }
      ]
    }
  ]
}]

Answer 1

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

name="formValue"

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

解决方案：

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

可以选择单选按钮，因为* ngFor

1 个答案: