Angular 处理带有角度6的单选按钮

我有一个问题清单，如下所示

  public questionList = [
    {
      question:{
        id: "Q1",
        query:"query 1"
      },
      options:[
        {
          id: "opt1",
          text: "Q1_opt1"
        },
        {
          id: "opt2",
          text: "Q1_opt2"
        }
      ],
      selected:{
        id:"",
        text:""
      }
    },

    {
      question:{
        id: "Q2",
        query:"query 2"
      },
      options:[
        {
          id: "opt1",
          text: "Q2_opt1"
        },
        {
          id: "opt2",
          text: "Q2_opt2"
        }
      ],
      selected:{
        id:"",
        text:""
      }
    }
  ];

我的目的是将问题和选项列为单选按钮。 每当有人选择一个选项时，所选选项的id应分配给与该问题关联的“selected.id”

下面是HTML部分

<div *ngFor="let question of questionList">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>


</div>

{{question.question.query}


{{option.text}


{{question.selected | json}}

但当我为第一个问题选择任意选项时，第二个问题的选项也会被选中，反之亦然

---

这里会出什么问题？

您在收音机中缺少name属性。对于一组选项，名称应该是唯一的

在动态生成单选按钮的用例中，您可以使用循环索引设置

名称

，如下所示-

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options; let j = index">
      <input type="radio" [value]="option?.id" [(ngModel)]="question.selected.id" [name]='"abc"+i+j'>{{option.text}}
      <br>
    </div>
    {{question.selected | json}}
</div>

{{question.question.query}


{{option.text}


{{question.selected | json}}

---

您在收音机中缺少name属性。对于一组选项，名称应该是唯一的

在动态生成单选按钮的用例中，您可以使用循环索引设置

名称

，如下所示-

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options; let j = index">
      <input type="radio" [value]="option?.id" [(ngModel)]="question.selected.id" [name]='"abc"+i+j'>{{option.text}}
      <br>
    </div>
    {{question.selected | json}}
</div>

{{question.question.query}


{{option.text}


{{question.selected | json}}

---

为单选按钮指定名称

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" [name]= "i" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>
</div>

{{question.question.query}


{{option.text}


{{question.selected | json}}

为单选按钮指定名称

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" [name]= "i" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>
</div>

{{question.question.query}


{{option.text}


{{question.selected | json}}

在您的阵列id中是相同的，这就是它选择其他阵列的选项按钮的原因。
你可以试试这个
//HTMl代码
{{question.question.query}


{{option.text}


{{question.selected | json}}

在您的阵列id中是相同的，这就是它选择其他阵列的选项按钮的原因。
你可以试试这个
//HTMl代码
{{question.question.query}


{{option.text}


{{question.selected | json}}

这不应该起作用，您尝试过吗？，因为选项的id不同，但特定单选按钮组的名称应该相同。已进行更改。对不起，我的错。伙计，这也不行。只需在您的机器上尝试您的答案即可。这将起作用，因为所有选项都具有相同的id。在您的更新之前，没有定义

i

，这就是为什么我认为这不应该起作用，您尝试过吗？，As

question.id

选项不同，但特定单选按钮组的名称应相同。已进行更改。对不起，我的错。伙计，这也不行。只需在您的机器上尝试您的答案这将起作用，因为所有选项都将具有相同的id。在您的更新之前，没有定义

i

，这就是为什么我要感谢您。。。成功了。还有一个问题。。。有什么方法可以将选项本身指定给“selected”而不是option.id？我认为“abc”+i”就足够了。。。我的单选按钮是/否。。。我希望一次只能选择一个。是的

“abc”+i”

应该可以。我不明白你的下一个问题，你能解释一下吗？在实际应用中“选项”“比这里给出的要复杂。。它有一些细节，比如重量。。。当我将提交的答案发送到后端服务器时，我希望将这些详细信息也附加到“所选”中。如。。在这种情况下，您可以看到“选定”中缺少“文本”字段。如何填充它？？从angular到angular有什么简单的方法吗？谢谢你。。。成功了。还有一个问题。。。有什么方法可以将选项本身指定给“selected”而不是option.id？我认为“abc”+i”就足够了。。。我的单选按钮是/否。。。我希望一次只能选择一个。是的

“abc”+i”

应该可以。我不明白你的下一个问题，你能解释一下吗？在实际应用中“选项”“比这里给出的要复杂。。它有一些细节，比如重量。。。当我将提交的答案发送到后端服务器时，我希望将这些详细信息也附加到“所选”中。如。。在这种情况下，您可以看到“选定”中缺少“文本”字段。如何填充它？？有没有容易的办法？