更改单选按钮Angular 11的文本颜色

Question

所以我有这些单选按钮：

<form [formGroup]="myForm" class="location_filter">
        <label style="font-weight: 500; color: #C0C0C0">Select a button: </label>
        <mat-radio-group>
            <div class="p-field-radiobutton">
                <mat-radio-button name="locationType" (click)="clickeEvent()" value="theFirst"
                 [disabled]="isDisabled" inputId="theFirst" formControlName="locationType" id="myRadioButton" >
                </mat-radio-button>
                <label for="theFirst" id="1Radio">Radio 1</label>
            </div>


            <div class="p-field-radiobutton">
                <mat-radio-button name="locationType" (click)="clickeEvent()" value="theSecond"
                    [disabled]="isDisabled" inputId="theSecond" formControlName="locationType" >
                </mat-radio-button>
                <label for="theSecond" style="color: #C0C0C0">Radio 2</label>
            </div>

        </mat-radio-group>
    </form>

我有 3 个问题：

1. 如何在页面加载时默认使用第一个收音机？
2. 在选择特定的单选按钮时，如何更改文本颜色？
3. 我根据条件禁用了按钮，如何同时禁用附加到它的点击事件？

我有点弱角形式，所以非常感谢任何帮助或建议。 谢谢

Answer 1

如何在页面加载时默认使用第一个收音机？

为此，您可以使用选中的属性并根据您要选择/取消选择的默认值分配真/假，如下所示 -

<mat-radio-button [checked]="true">Radio button 1</mat-radio-button>
<mat-radio-button [checked]="false">Radio button 2</mat-radio-button>

选择特定的广播按钮时如何更改文本颜色？

有多种方法可以做到这一点，例如 ngStyle 和 ngClass。你可以阅读他们的信息here。

我根据条件禁用了按钮，如何也禁用附加到它的点击事件？

您可以使用以下 CSS 属性使单选按钮不可点击。当单选按钮被禁用时，您也可以使用 ngStyle/ngClass 添加此属性。

pointer-events: none