javascript - 如何将单选按钮逻辑放入 *ngFor 中？

Question

现在，当我选择一个选项时，我在表单中填充了单选按钮的选项，但我没有看到 isChecked true ，我是否缺少使用 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>

Answer 1

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

示例:-

<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

因此，当用户一次只能检查一个选项时。

对于你的例子，我给出的名字有问题。

我们需要了解用户选择了哪个选项，因此您需要绑定(bind)一个唯一的值，在上面给出的性别示例中，我为每个 radio 控制值添加了不同的值。

 [value]="option.answerOptionId"

这里，[value] 是从代码到 View 的一种绑定(bind)方式，因此 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 的原因。对于这次事件，我已经发送了整个 radio 控制。 ts 文件中的 Log 方法将显示用户当前选择的选项。

总结一下。

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