时间戳

首页 > 解决方案 > 如何在具有 mat-radio-group 的“selected”属性的 Angular Material 中选择 mat-radio-button？

angular - 如何在具有 mat-radio-group 的“selected”属性的 Angular Material 中选择 mat-radio-button？

问题描述

我有这些代码行

<mat-radio-group color="primary"
                       (change)="systemChange($event)">
        <mat-radio-button *ngFor="let system of systems"
                          [value]="system">{{system}}</mat-radio-button>

当我查看页面时，默认情况下没有选择任何按钮，我想选择其中的 1 个。在AngularMaterial 文档中有一个

@Input()
 selected: MatRadioButton

而且我无法理解如何将它与*ngFor循环一起使用，或者是否有另一种方法来解决这个问题*ngFor。

标签： angularangular-material

解决方案

您可以将 [value]="systems[0]" 添加到您的代码中：

<mat-radio-group color="primary" 
                 [value]="sys"
                 (change)="systemChange($event)">

在您的控制器中使用 sys = 'whatever'；

在此示例中，选择了第二个无线电：

<mat-radio-group [value]="val" aria-label="Select an option">
    <mat-radio-button value="a">Option 1</mat-radio-button>
    <mat-radio-button value="b">Option 2</mat-radio-button>
    <mat-radio-button value="c">Option 3</mat-radio-button>
    <mat-radio-button value="d">Option 4</mat-radio-button>
</mat-radio-group>

和

export class RadioOverviewExample {
  val = 'b';
}

推荐阅读