ngFor 单选按钮无法取消选择

Question

我正在尝试做一个测验。我可以按照我想要的方式显示问题和答案，但单选按钮无法正常工作。一旦单击，它们就不会变得未被标记，无论是再次单击它们还是单击另一个。它们确实传递了最后单击的值，但您无法重新单击已单击的值。 （即，您单击答案 1，然后单击 3，然后再次单击 1。1 和 3 均被标记，但传递 3 的值）

const quizQuestions = [
    {
        index: 0,
        formName: "q0",
        question: "Ready?",
        options: [
            {
                option: "1",
                answer: "Begin!",
                affectUp: [],
                affectDown: []
            }
        ]
    },
    {
        index: 1,
        formName: "q1",
        question: "You\u2019re a “jack-of-all-trades”.",
        options: [
            {
                option: "1",
                answer: "Strongly Agree"
            },
            {
                option: "2",
                answer: "Neutral"
            },
            {
                option: "3",
                answer: "Strongly Disagree"
       }
                

]

<div *ngFor="let qz of quizQuestions; let i = index;">
    <div class="card" *ngIf="i === quizNumber">
        {{qz.question}}
        <div class="card-body">
            <div *ngFor="let opt of qz.options; let i2 = index;">
                <form [formGroup]="quizForm">
                    <label for="o-{{i}}-{{i2}}">{{opt.answer}}</label>
                    <input type="radio"  id="o-{{i}}-{{i2}}" formControlName="q{{i}}" [value]="opt.option">
                </form>
            </div>
        </div>
    </div>
</div>

  ngOnInit(): void {
    this.quizForm = this.formbuilder.group(
      {
        q0: [''],
        q1: [''],
        q2:[''],
        q3: [''],
        q4: ['']
      }
    )
  }

Answer 1

您将创建尽可能多的

，因为您将其放置在 *ngFor 中。此外，单选按钮都需要具有相同的名称，以便浏览器将它们视为同一组选项的一部分。

将

从 *ngFor 迭代中取出，并为所有相关单选按钮提供相同的 name 属性。