Angular中动态切换mat-radio-button选中状态问题求助

你的代码存在两处逻辑错误，导致单选按钮始终处于选中状态：

1. mat-radio-group的[(ngModel)]与mat-radio-button的[value]绑定了同一个变量selected，形成循环绑定：当selected变为true时，按钮的value同步变为true，组的ngModel匹配该值导致按钮选中；当切换selected为false时，按钮的value也变成false，组的ngModel依然匹配新的value，按钮还是保持选中。
2. 手动设置[checked]属性会干扰Angular Material内置的选中状态管理逻辑，单选按钮的选中状态应由组的ngModel和按钮的value共同控制，无需额外配置checked。

修改后的代码 #

example.component.ts

selected = false;

toggleSelection() {
  this.selected = !this.selected;
}

example.component.html

<mat-radio-group [(ngModel)]="selected">
  <!-- 将按钮value设为固定布尔值true，避免与ngModel变量联动 -->
  <mat-radio-button [value]="true">
    {{ selected }}
  </mat-radio-button>
</mat-radio-group>

<button (click)="toggleSelection()">
  Toggle selection
</button>

逻辑说明 #

• 固定mat-radio-button的value为true，此时当selected等于true时，按钮会被选中；当selected为false时，因不匹配value，按钮自动取消选中。
• 移除[checked]属性，让mat-radio-group的双向绑定自动管理选中状态。

内容的提问来源于stack exchange，提问作者StaticName