javascript - 有什么方法可以在 Angular 6 的嵌套 JSON 中动态显示单选按钮吗？

Question

我正在尝试创建一个 Angular 为 6 的问答 HTML 表单。其中，我有一个嵌套的 JSON

我的 JSON:

questionDetail = [
        {"question":"test1","answer":["1","2","3"]},
        {"question":"test2","answer":["4","5"]}
    ]

我的 HTML:

<div *ngFor="let q of questionDetail; let i = index">
        <div><h5>{{i + 1}}. {{q.question}}</h5>
         <div *ngFor="let a of q.answer">
             <input type="radio" [(ngModel)]="radioSelected" [value]="a">&nbsp;{{a}}
            </div>
          </div>
      </div>

如果我尝试选择第二个问题的答案，第一个问题的答案会像这样取消选择

我该如何解决这个问题。

Answer 1

您的单选按钮组错误，它为所有输入创建了相同的名称

您需要区分 2 个问题。

<div *ngFor="let q of questionDetail; let i = index">
        <div><h5>{{i + 1}}. {{q.question}}</h5>
         <div *ngFor="let a of q.answer">
             <input type="radio" [(ngModel)]="radioSelected[i]" name="{{i}}" [value]="a">&nbsp;{{a}}

            </div>
          </div>
      </div>

像这样:[(ngModel)]="radioSelected[i]"name="{{i}}" 注意这 2 个变化，用于区分组，我们将有问题 1 radioselect 中的值 1和 radioselect[2] 用于问题 2。

Demo