如何在 Angular 材料中 select 一个垫子单选按钮，并具有垫子无线电组的“选定”属性？

Question

我有这些代码行

<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解决这个问题。

Answer 1

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

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

在您的 controller 中使用 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';
}