如何在 *ngFor 中放置单选按钮逻辑？

Question

我现在在表单中填充了带有单选按钮的选项，当我选择我没有看到的选项之一isChecked true 时，我是否缺少下面使用 angular 的任何内容？

应用程序组件.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

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

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

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

 [value]="option.answerOptionId"

这里，[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 文件中的日志方法将显示用户选择的当前选项。

总结。

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