如何在 *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 文件中的日志方法將顯示用戶選擇的當前選項。

總結。

• 單選按鈕的同名。
• 為每個單選按鈕提供不同的值。
• 發送事件中的控件或控件值，以有利者為准。