Question

我正在使用角度材料2单选按钮，遵循以下文档：https://material.angular.io/components/component/radio。

我面临的问题是让单选按钮的默认选择值为No。如果您在plunker中看到：https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview，您会发现没有选择任何选项。我希望页面加载时默认值为No。

Answer 1

许多傻瓜似乎不再为我工作了。这里有一个经过修改的stackblitz：

Blitz

如上所述，我们可以设置ngModel和变量：

occurences

并且在＆＃39;＆＃39;文件：

[(ngModel)]="favoriteSeason"

或者我们可以设置检查：

  favoriteSeason: string = 'Winter';

我最近发现的另一个小问题是，如果你错误地给mat-checkbox错误（重复的ID），那么它不起作用 - 你不能检查任何东西。确保您的ID是唯一的。

Answer 2

您可以使用checked，如下所示：

[checked]="data.value ==='false'"

请注意我们正在使用字符串'false'而不是false进行检查，因为您的值包含值为false的字符串。

Plunker

Answer 3

还有另一个选项，您可以使用[(ngModel)]初始化您的组件md-radio-group。

plunker demo。

Answer 4

您可以使用PackageReference属性来实现它。见Plunker

Answer 5

在使用素材单选按钮时，我喜欢被动方法。下面是如何使用数据库检查特定formControlName

的true和false的示例

对话框中的组件

<mat-radio-group formControlName="trueClient">
                <mat-radio-button class="material-radio" value="true" [checked]="data.trueClient === 'true'">True Client</mat-radio-button>
                <mat-radio-button class="material-radio" value="false" [checked]="data.lostLead === 'false'">Lost Lead</mat-radio-button>
        </mat-radio-group>

如果这是更新表单，请确保在表单构建器中设置值。示例如下：

对话框中组件的

.ts文件。

this.viewClient.setValue({
      trueClient: this.data.trueClient
    });

在这种情况下，我在对话框中打开数据。所以数据来自以下内容： component.ts之前打开对话框。只是一个引用，以便您知道从上面获取数据变量的位置来设置值。

用于打开对话框的组件。有关如何设置的详细信息，请参阅材料文档中的Dialog。

const dialogRef = this.dialog.open(ClientNotesComponent, {
        height: '600px',
        width: '800px',
        data: {trueClient: trueClient}
    });
 });
}

Answer 6

<mat-radio-button [checked]="true"</mat-radio-button>

Answer 7

HTML文件

<mat-radio-group aria-label="Select an option" [(ngModel)]="formValues['type']">
    <mat-radio-button value="individual">Individual</mat-radio-button>
    <mat-radio-button value="business">Business</mat-radio-button>
</mat-radio-group>

Ts文件

ngOnInit()
{
    this.formValues['type'] = "business";
}

Answer 8

对于我来说，选择问题已通过将name="howLong"属性替换为[ngModelOptions]="{standalone: true}"来解决。
需要注意的是，选择是为A day or less than a day工作的。但是它不适用于More than a day

非工作版本：

   <mat-radio-group
        [(ngModel)]="howLong"
        name="howLong"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

工作版本：

   <mat-radio-group
        [(ngModel)]="howLong"
        [ngModelOptions]="{standalone: true}"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

Answer 9

如果您想使用[（ngModel）]将字符串或布尔值传递给mat-radio-group，您可以在TS文件中为[（ngModel）]设置默认值。像这样： HTML file

Ts file

默认单选按钮选择值角度材料2

9 个答案: