如何根据条件禁用 mat 单选组内 angular 中的单选按钮答案

【问题标题】：how to disable a radion button in angular inside my radio group based on condition如何根据条件禁用 mat 单选组内 angular 中的单选按钮
【发布时间】：2021-11-21 16:28:48
【问题描述】：

我的单选按钮组有 3 个单选按钮，但我只想禁用某些按钮而不是所有按钮，如何在 angular 中做到这一点，例如仅禁用选定按钮而不是 mat-radio-group 中的所有按钮。

例如，我只想从 mat radio group 禁用 mat-radio-button Sale ，该按钮不应该是可点击的。

有没有人知道如何在角度上实现这一点？谢谢。

 <mat-radio-group [disabled]="isEditing && dealData !== null" (change)="onChangeDispositionType($event)" [(ngModel)]="dealDispositionFormFields.dealDispositionType">
            <div class="deal-form-header-labels">What type of idle disposition deal would you like to submit? (*)</div>
              <div class="flex" style="justify-content: space-between;">
                <div class="deal-form-btn-group w-30per" [ngClass]="{'v-bg-color':dealDispositionFormFields.dealDispositionType === 'Buyout'}">
                  <div class="deal-form-btn-group-radio">
                    <mat-radio-button
                      *ngIf="dealDispositionFormFields.dealDispositionType === 'Buyout' else Buyout"    
                      color="accent"  
                      [value]="'Buyout'">
                      <span class="alter-text-color">Buyout</span>
                    </mat-radio-button>
                    <ng-template #Buyout>
                      <mat-radio-button
                        [value]="'Buyout'">
                        Buyout
                      </mat-radio-button>
                    </ng-template>
                  </div>
                </div>
                <div  class="deal-form-btn-group w-30per" [ngClass]="{'v-bg-color':dealDispositionFormFields.dealDispositionType === 'Sale'}">
                  <div class="deal-form-btn-group-radio">
                    <mat-radio-button
                    disabled
                    *ngIf="dealDispositionFormFields.dealDispositionType === 'Sale' else Sale"    
                      color="accent"
                      [value]="'Sale'">
                     <span class="alter-text-color">Sale</span>
                    </mat-radio-button>
                    <ng-template #Sale>
                      <mat-radio-button
                        [value]="'Sale'">
                        Sale
                      </mat-radio-button>
                    </ng-template>
                  </div>
                  
                </div> 
                <div class="deal-form-btn-group w-30per" [ngClass]="{'v-bg-color':dealDispositionFormFields.dealDispositionType === 'Sublease'}">
                  <div class="deal-form-btn-group-radio">
                    <mat-radio-button
                    *ngIf="dealDispositionFormFields.dealDispositionType === 'Sublease' else Sublease"    
                      color="accent"
                      [value]="'Sublease'">
                     <span class="alter-text-color">Sublease</span>
                    </mat-radio-button>
                    <ng-template #Sublease>
                      <mat-radio-button
                        [value]="'Sublease'">
                        Sublease
                      </mat-radio-button>
                    </ng-template>
                  </div>
                  
                </div> 
              </div>
            </mat-radio-group>

【问题讨论】：

这和 TS 有什么关系？
@Aaradhya Patel 从最小的可重复示例开始
您可以使用 [disabled]="condition" 作为 mat-radio-button。
ikt 只使用属性disabled，例如<mat-radio-button [disabled]="myvariable"> 你给一个变量赋值真或假
谢谢，感激

标签： angular typescript angular-material

【解决方案1】：

你可以这样做：

<mat-radio-button
   [disabled]="dealDispositionFormFields.dealDispositionType === 'Sale'"   
   color="accent"
   [value]="'Sale'"
>
   <span class="alter-text-color">Sale</span>
</mat-radio-button>

【讨论】：