时间戳

首页 > 解决方案 > 角度单选按钮与模型不同步

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

问题描述

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

我正在创建某种调查应用程序，该应用程序（当然）包含多个问题，但是当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 中的错误还是我在这里做错了什么。

标签： angularparent-childreactive-forms

解决方案

如何根据给定的答案设置 [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

推荐阅读