如何在单选按钮组的 *ngFor 中设置最初选定的单选按钮

Before我使用表单验证一切正常，我的单选按钮组 html 如下所示：

<div class="form-group row">
                <label class="col-xs-6 col-form-label">{{getHalfScoresErrorsCount()}}</label>
                <div class="col-xs-6">
                    <span *ngFor="let answer of gradingKey.halfScoresCountAnswers">
                        <label class="form-check-inline">
                            <input class="form-check-input" type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)"
                            [(ngModel)]="gradingKey.currentAnswer" [value]="answer">
                            {{answer.value}}
                        </label>
                    </span>
                </div>
            </div>

After实现反应式表单看起来像这样：

<div class="form-group row">
    <label class="col-xs-6 col-form-label">{{getHalfScoresErrorsCount()}}</label>
    <div class="col-xs-6">
        <span *ngFor="let answer of gradingKey.halfScoresCountAnswers">
            <label class="form-check-inline">
                <input class="form-check-input" type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)"
                formControlName="halfScoresCount" [value]="answer">
                {{answer.value}}
            </label>
        </span>
    </div>
</div>

我添加了表单控件名称属性并删除了ngModel指示...

然后我改变了代码：GradingKeyComponent.ts:

ngOnInit()
{
 this.gradingKeyForm = this.fb.group({
      bestGradeScores: bestGradeScoresFormControl,
      worstGradeScores: worstGradeScoresFormControl,
      scoreAtBend: [this.gradingKey.scoreAtBend],
      gradeAtBend: [this.gradingKey.gradeAtBend],
      halfScoresCount: [this.gradingKey.currentAnswer]
    });
}

我没有更改我的模型对象：评分键.ts

constructor(obj: any)
{
    this.halfScoresCountAnswers = [new KeyValue(true, 'Yes'), new KeyValue(false, 'No')];
    this.currentAnswer = obj.halfScoresCount == true ? this.halfScoresCountAnswers[0] : this.halfScoresCountAnswers[1];
}

我不想仅仅因为我现在需要验证而更改我的 html...2 个问题！

目前，没有单选按钮值设置为 true/selected。

有些人可能会说这是因为 *ngFor... 中有 2 个相同的 formControlName。

如果可能的话，我应该如何正确解决这个问题而不改变我的html？

一旦您的相关 FormControl（在本例中，halfScoresCount) [value]设置后，相关的无线电选项answer应自动选择匹配项。

我怀疑这是由于初始化造成的

halfScoresCount: [this.graFodingKey.currentAnswer]

作为一个数组。大概应该是

halfScoresCount: this.graFodingKey.currentAnswer

where this.graFodingKey.currentAnswer匹配一个可能的值gradingKey.halfScoresCountAnswers[]（更明确地说，匹配迭代的可能值answers) 与您在反应形式之前所做的完全一样（即，[(ngModel)]="gradingKey.currentAnswer" [value]="answer")