Javascript 如何将单选按钮逻辑放入*ngFor？

现在，当我选择一个我看不到的选项时，我在表单中用单选按钮填充了选项。我是否在下面用angular键遗漏了什么

app.component.html

<div class="form-group">
 <label>answerOption</label>
    <div *ngFor="let option of singleQuestion.answerOption">
        <label>
           <input type="radio" name="option.isChecked" 
              [value]="true" (change) ="handleChange(option.isChecked)">
                 {{option.answerText}}
        </label>
   </div>

---

首先，您需要对单选按钮进行分组，这是通过为单选按钮提供相同的名称来完成的

例如：-

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

这里，[value]是单向绑定，从代码到视图，因此ischecked未设置为true。 下面给出了更好的方法

       <div class="form-group">
          <label>answerOption</label>
            <div *ngFor="let option of singleQuestion">
                <label>
                <input type="radio" name="question" 
         [value]="option.answerOptionId" (change) ="handleChange(option)">
                {{option.answerText}}
                </label>
            </div>
        </div>

我可以从您的选项中选择的最好的选项是option.answerOptionId，请参考我上面的html代码片段。 发送当前单选按钮option.isChecked是不正确的，因为我们将始终得到false。您在ts文件中为两个应答选项提供值false的原因。对于这次活动，我已经发送了整个无线电控制。ts文件中的Log方法将显示用户选择的当前选项

总而言之

单选按钮的名称相同。 为每个收音机提供不同的值 按钮 在事件中发送控件或控件值， 以有利者为准。

---

您可以使用ngx子表单轻松地分离数据结构和版本：如果您提供最小的stackblitz复制，我可以将其分叉并向您展示我不认为我可以将应用程序组合在一起，这将是大量的工作，我只是添加了一小段代码，这是在需要修复的模式窗口中。如果您能帮助我完成以上代码，我将不胜感激。@maxime1992试图将其组合起来

       <div class="form-group">
          <label>answerOption</label>
            <div *ngFor="let option of singleQuestion">
                <label>
                <input type="radio" name="question" 
         [value]="option.answerOptionId" (change) ="handleChange(option)">
                {{option.answerText}}
                </label>
            </div>
        </div>