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

Wira Xie

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

问题和选项来自json文件。

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

但是看起来我做错了。

ngFor产生的单选按钮只能使其中一个可以选择。

当我单击另一个问题的单选按钮时,上一个问题的单选按钮不会像问题留为空白那样被选中。

单击另一个问题的单选按钮时,是否可以使单选按钮不从上一个/另一个问题消失?

//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>

Vivek Doshi

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

name="formValue"

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


解决方案:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

仅检查* ngFor循环中的一个复选框(单选按钮行为)

如何在每行内部有两个单选按钮的ngFor中选择单选按钮

在 Angular 中禁用 ngFor 中的一个按钮

在每行的 *NgFor 中放置一个按钮

通过另一个 ngFor 过滤 ngFor

在另一个 ngFor 中使用 ngFor?

HTML对于非单选按钮一次只能选择一个按钮

动态生成的单选按钮的问题(Angular *ngfor)

NgFor显示最后一个元素

在ngFor中有一个mat-radio按钮,用于Reactive Forms

角度 ngFor 每行显示 3 个按钮

如何将选择指令应用于* ngFor生成的第一个选项?

Angular ngfor全选并取消选择

如何简化选择上的 *ngFor

在 *ngFor 中选择正确的框

如何在核心Java程序中添加单选按钮组,以便一次只能选择一个单选按钮?

Angular 6 从另一个 ngFor 向 ngFor 元素添加活动类

在另一个ngFor内部数组上的角度访问ngFor索引

ngFor依赖于另一个ngFor完成渲染-获取ExpressionChangedAfterItHaHasBeenCheckedError [Angular 2]

使用* ngFor [Angular2]创建多个单选按钮

Angular 9 ngModel未在ngFor内设置单选按钮值

更改ngFor循环中选定单选按钮的颜色

单选按钮行为异常,角度为4(在ngFor内部)

如何在角度ngfor中设置单选按钮组的值

在角度6中访问* ngFor组件的最后一个

使用* ngFor显示一个月中的天数

访问* ngFor中的最后一个项目?

从ngFor抓取一个值以用作嵌套形式的参数

保存Angular 2 * ngFor循环的最后一个值