angular - hur man inaktiverar mat-radio-knappar efter att ett alternativ har valts

I min quizapp behöver jag inaktivera mat-radio-knapparna efter att ett alternativ har valts. Jag har [disabled]="alreadyAnswered" på mina mat-radio-knappar i min mall och har alreadyAnswered=false; i min TS-fil deklaration. När ett alternativ väljs sätts this.alreadyAnswered=true; i funktionen setSelected(i). När ett alternativ har valts bör alla andra alternativ inaktiveras och gråas ut. Kan du hjälpa mig med detta? Tack.

i SingleAnswerComponent-mall:

<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>

Svar #1

Du kan/bör omsluta ditt mat-radio-button i mat-radio-group för att skapa en grupp med radioknappar, då kommer du att ha möjlighet att "inaktivera" hela gruppen, vilket förhindrar att välja andra alternativ, så snart ett har valts via en enkel Boolean-flagga bunden till mat-radio-group.

Vänligen kolla ett exempel nedan:

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