如何在Angular Material中设置第一个单选按钮为默认选中

mat-radio-group 通过绑定的value值控制选中状态，要默认选中第一个选项，只需要在组件初始化阶段，把绑定值设置为选项数组的第一个元素即可，两种常用场景的实现方式如下：

模板驱动表单（ngModel）场景 #

1. 首先在组件TS文件中定义选中值绑定变量，在初始化钩子中给变量赋值为选项数组的第一个元素：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  // 绑定单选组选中值
  selectedBus: string;
  // 单选选项数组
  buses: string[] = ['1路公交', '2路公交', '3路公交', '机场专线'];

  ngOnInit(): void {
    // 初始化时设置默认选中第一项
    this.selectedBus = this.buses[0];
  }
}

2. 修改模板中的mat-radio-group标签，添加双向绑定关联上一步定义的变量：

<div class="input">
  <mat-radio-group class="radio-group" [(ngModel)]="selectedBus">
    <mat-radio-button
      class="radio-button"
      *ngFor="let bus of buses"
      [value]="bus"
    >
      {{ bus }}
    </mat-radio-button>
  </mat-radio-group>
</div>

响应式表单场景 #

如果使用响应式表单，不需要引入ngModel，直接在初始化表单控件时把默认值设为选项数组第一个元素即可：

1. TS文件代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  busForm: FormGroup;
  buses: string[] = ['1路公交', '2路公交', '3路公交', '机场专线'];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.busForm = this.fb.group({
      // 直接设置表单控件默认值为数组第一项
      selectedBus: [this.buses[0]]
    });
  }
}

2. 模板代码：

<div class="input" [formGroup]="busForm">
  <mat-radio-group class="radio-group" formControlName="selectedBus">
    <mat-radio-button
      class="radio-button"
      *ngFor="let bus of buses"
      [value]="bus"
    >
      {{ bus }}
    </mat-radio-button>
  </mat-radio-group>
</div>

注意：如果buses数组是通过接口请求异步获取的，需要在请求返回赋值完成后，再给绑定变量/表单控件设置默认值，否则会出现找不到对应值导致默认选中失效的问题。

内容的提问来源于stack exchange，提问作者EMahan K