角度单选按钮与模型不同步

Question

我遇到了一个问题，当后续问题中存在相同的标签时，我的单选按钮（视图）与我的模型（反应形式）不同步。

我正在创建某种调查应用程序，其中（当然）包含多个问题，但是当 2 个后续问题在不同位置包含相同的答案标签时，在选择其中一个问题并在 2 个问题之间导航时，视图会不同步。我创建了一个Stackblitz来说明这个问题。（没有材料的相同Stackblitz）

复制步骤错误选择：

1. 选择问题 1 的第二个选项 ('MRX')。
2. 单击“下一步”按钮（答案存储在模型中）。
3. 再次为问题 2 选择第二个选项（'Ibanez'）。
4. 单击“上一个”按钮（答案存储在模型中）。
5. 再次单击“下一步”按钮。
6. 现在您可以看到视图与模型不同步（模型也打印在屏幕上）。

繁殖步骤双选：

1. 选择问题 1 的第一个选项 ('Ibanez')。
2. 单击“下一步”按钮（答案存储在模型中）。
3. 选择问题 2 的第二个选项（'Inbanez'）。
4. 单击“上一个”按钮（答案存储在模型中）。
5. 现在您可以看到选择了 2 个选项（第一个和第二个）。

有关该应用程序的更多信息，我已在 stackblitz 的父组件 (survey-parent.component.html) 中添加了说明。

我不确定这是 Angular 中的错误还是我在这里做错了什么。

Answer 1

如何根据给定的答案设置 [checked] 属性？

    <mat-radio-group formControlName="answer">
    <ng-container *ngFor="let questionAnswer of surveyQuestion.answers; let i = index">
      <mat-radio-button [checked]="isSet(i+1)" color="primary" [value]="i+1">{{questionAnswer}}</mat-radio-button>
      <br /><br />
    </ng-container>
  </mat-radio-group>

在 ts 文件中：

  isSet(i: number){
     return i ===this.surveyQuestion.givenAnswer;
  }

我已经更新了片段：

https://stackblitz.com/edit/angular-9-material-starter-fbs7gk?file=src%2Fapp%2Fsurvey-child%2Fsurvey-child.component.ts