选择选项后如何禁用 mat-radio-buttons答案

【问题标题】：how to disable mat-radio-buttons after an option is selected选择选项后如何禁用 mat-radio-buttons
【发布时间】：2020-11-06 06:50:52
【问题描述】：

在我的 quiz app 中，我需要在选择一个选项后禁用 mat-radio-buttons。我在模板中的 mat-radio-buttons 上有 [disabled]="alreadyAnswered"，在我的 TS 文件声明中有 alreadyAnswered = false;。选择选项后，在SetSelected（i）函数中设置了 this.alreadyAnswered = true;。一旦选择了一个选项，所有其他选项都应该被禁用并灰显。请你帮我解决这个问题。谢谢。

在 SingleAnswerComponent 模板中：

<div *ngIf="!multipleAnswer">
  <div class="options" *ngFor="let option of currentQuestion.options; index as i">
    <mat-radio-button (change)="setSelected(i)" [disabled]="alreadyAnswered" [class]="option.className">
      <span i18n>{{ i + 1 }}. {{ option.text }}</span>

      <ng-container>
        <i class="material-icons feedback-icon" *ngIf="option.correct && isCorrectAnswerSelected">done</i>
        <i class="material-icons feedback-icon" *ngIf="!option.correct">clear</i>
      </ng-container>
    </mat-radio-button>

【问题讨论】：

目前的结果是什么？究竟会发生什么？
现在单个答案中的所有选项都是可点击的，当我点击一个选项时，所有其他选项仍然可以点击，希望它禁用其他选项点击（灰色)。
我明白了。然后我们需要查看更多代码。该单选按钮是组件的一部分吗？所有按钮都在同一个组件内吗？否则，您将不得不使用服务与其他组件通信单击按钮（除非您已经拥有此功能？）。
是的，mat-radio-button 是 SingleAnswerComponent 的一部分（参见我上面的编辑），所有单选按钮都在同一个组件中。

标签： angular typescript

【解决方案1】：

您可以/应该将您的 mat-radio-button 包裹在 mat-radio-group 中以创建一组单选框，然后您将能够“禁用”整个组，这将阻止选择任何其他选项，只要有通过绑定到 mat-radio-group 的简单布尔标志选择。

请查看以下示例：

https://stackblitz.com/edit/angular-mbhewk-pw5jfs?file=src%2Fapp%2Fradio-overview-example.html

【讨论】：

我将它包装在 mat-radio-group 中并添加了 onChange 功能，但它似乎仍然没有禁用其他选项。请您在 Stackblitz 上查看我的代码。谢谢。
因此在您的示例中，所有测验的设置方式都具有多种选择，这意味着复选框，而不是单选按钮，因此我很难测试。
所有测验都有单答案题，所以应该不难测试。
当我在浏览器中检查你的应用程序时，我可以清楚地看到只有codelab-question-multiple-answer 组件已被渲染，它在下面渲染mat-checkbox
另一件事，你应该在你的转发器之前包装 mat-radio-group，而不是之后，每个问题单个问题的所有单选按钮都应该包装到一个 mat-radio-group 中