如何在Angular的mat-radio-group中仅禁用单个单选按钮？

方案一：模板内直接指定禁用条件 #

直接在<mat-radio-button>上绑定[disabled]属性，通过判断当前项的id来决定是否禁用。比如要禁用Cash Account（对应id=25），修改模板代码如下：

<mat-radio-group aria-label="Select an option"
 formControlName="underGroupId" (click)="onClickRadioChange()">
  <mat-radio-button *ngFor="let aTypes of AccountTypeArr"
   [checked]="aTypes.id == 30" [value]="aTypes.id"
   [disabled]="aTypes.id === 25"
   (click)="onCheckAccountType(aTypes.id)">{{aTypes.accountName}}</mat-radio-button>
</mat-radio-group>

方案二：通过数组字段动态控制禁用状态 #

如果需要更灵活的控制（比如后续根据业务逻辑动态修改禁用状态），可以先在AccountTypeArr中添加disabled字段：

AccountTypeArr: any[] = [
    {id:30, accountName:'Bank Account', disabled: false},
    {id:25, accountName:'Cash Account', disabled: true}
];

然后在模板中绑定这个字段到[disabled]属性：

<mat-radio-group aria-label="Select an option"
 formControlName="underGroupId" (click)="onClickRadioChange()">
  <mat-radio-button *ngFor="let aTypes of AccountTypeArr"
   [checked]="aTypes.id == 30" [value]="aTypes.id"
   [disabled]="aTypes.disabled"
   (click)="onCheckAccountType(aTypes.id)">{{aTypes.accountName}}</mat-radio-button>
</mat-radio-group>

这种方式的优势在于，你可以在组件逻辑中随时修改AccountTypeArr里对应项的disabled值，实现动态禁用/启用。

内容的提问来源于stack exchange，提问作者The Losers Club