Question

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

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

复制步骤选择错误：

为问题1（'MRX'）选择第二个选项。
单击“下一步”按钮（答案将存储在模型中）。
再次为问题2选择第二个选项（“ Ibanez”）。
单击“上一个”按钮（答案将存储在模型中）。
再次单击“下一步”按钮。
现在您可以看到视图与模型不同步（模型也显示在屏幕上）。

复制步骤双重选择：

选择问题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

Answer 2

我已尝试在您的代码中对其进行修复，如果我重写了您的问卷调查，但它仍然无法正常工作。它认为这是Angular Material中的错误，您可以在https://github.com/angular/components这里进行报告。

也许目前的解决方法是打印所有问题并隐藏所有您不想显示的问题？在这次闪电战中，我开始展示所有内容，但是我还没有完成隐藏问题的逻辑。 https://stackblitz.com/edit/angular-9-material-starter-2xx7ce

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

2 个答案: