我只想禁用一个单选按钮

Question

我有一个对象数组 app.component.ts

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

迭代 mat-radio-group 中的对象数组 app.component.html

<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"
  (click)="onCheckAccountType(aTypes.id)">{{aTypes.accountName}}</mat-radio-button>
</mat-radio-group>

Answer 1

取决于您要禁用按钮的条件。您可以为所有对象添加一个属性

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

<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.isDisabled"
    (click)="onCheckAccountType(aTypes.id)">{{aTypes.accountName}}</mat-radio-button>
</mat-radio-group>

或者您可以在 HTML 中进行评估

<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 < 30"
    (click)="onCheckAccountType(aTypes.id)">{{aTypes.accountName}}</mat-radio-button>
</mat-radio-group>