Angular 单选按钮与模型不同步

Question

我遇到了一个问题，当后续问题中存在相同的标签时，我的单选按钮( View )与我的模型( react 形式)不同步。
我正在创建某种调查应用程序，其中(当然)包含多个问题，但是当 2 个后续问题在不同位置包含相同的答案标签时，在选择其中一个问题并在 2 个问题之间导航时， View 会不同步。我创建了一个 Stackblitz来说明问题。 (相同 Stackblitz 无 Material )
复制步骤错误选择:

选择问题 1 的第二个选项 ('MRX')。

单击“下一步”按钮(答案存储在模型中)。

再次为问题 2 选择第二个选项('Ibanez')。

单击“上一个”按钮(答案存储在模型中)。

再次单击“下一步”按钮。

现在您可以看到 View 与模型不同步(模型也打印在屏幕上)。

繁殖步骤双选:

选择问题 1 的第一个选项 ('Ibanez')。

单击“下一步”按钮(答案存储在模型中)。

选择问题 2 的第二个选项('Inbanez')。

单击“上一个”按钮(答案存储在模型中)。

现在您可以看到选择了 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