Angular中设置mat-radio-group默认选中第一个动态生成选项

这个需求我之前做项目时刚好碰到过，不管动态生成多少个单选选项，要始终默认选中第一个，甚至数据更新后也要保持这个行为，其实结合Angular的表单机制和数据监听就能轻松搞定。下面分两种常用的表单场景给你具体方案：

方案一：模板驱动表单（ngModel） #

如果你的项目用的是模板驱动表单，可以这么处理：

HTML代码 #

<mat-radio-group [(ngModel)]="selectedOption">
  <mat-radio-button *ngFor="let option of listOfOptions" [value]="option.value">
    {{option.label}}
  </mat-radio-button>
</mat-radio-group>

组件代码 #

在组件类里，我们需要监听listOfOptions的变化，一旦数据更新就把选中值设为第一个选项的value：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnChanges {
  @Input() listOfOptions: any[] = [];
  selectedOption: any;

  ngOnChanges(changes: SimpleChanges): void {
    // 当listOfOptions变化且有数据时，选中第一个选项
    if (changes['listOfOptions'] && this.listOfOptions.length > 0) {
      this.selectedOption = this.listOfOptions[0].value;
    }
  }

  // 如果是组件内部初始化或更新listOfOptions，也要在数据更新后设置选中值
  updateOptions(newOptions: any[]) {
    this.listOfOptions = newOptions;
    if (this.listOfOptions.length > 0) {
      this.selectedOption = this.listOfOptions[0].value;
    }
  }
}

方案二：响应式表单（FormControl） #

如果用的是响应式表单，思路类似，只是用FormControl来管理选中状态：

HTML代码 #

<mat-radio-group [formControl]="radioControl">
  <mat-radio-button *ngFor="let option of listOfOptions" [value]="option.value">
    {{option.label}}
  </mat-radio-button>
</mat-radio-group>

组件代码 #

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnChanges {
  @Input() listOfOptions: any[] = [];
  radioControl = new FormControl();

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['listOfOptions'] && this.listOfOptions.length > 0) {
      // 更新FormControl的值为第一个选项的value
      this.radioControl.setValue(this.listOfOptions[0].value);
    }
  }

  // 内部更新数据时同样处理
  updateOptions(newOptions: any[]) {
    this.listOfOptions = newOptions;
    if (this.listOfOptions.length > 0) {
      this.radioControl.setValue(this.listOfOptions[0].value);
    }
  }
}

额外注意点 #

• 记得处理listOfOptions为空的情况，避免出现undefined报错，设置选中值前一定要先判断数组长度是否大于0；
• 如果你的listOfOptions是通过Observable获取的（比如从API请求数据），可以直接在订阅回调里设置选中值，不用依赖ngOnChanges，示例如下：

this.yourDataService.getOptions().subscribe(options => {
  this.listOfOptions = options;
  if (options.length > 0) {
    this.selectedOption = options[0].value; // 模板驱动表单用这个
    // this.radioControl.setValue(options[0].value); // 响应式表单用这个
  }
});

这样不管选项数量怎么变，只要数据更新，第一个选项都会自动被选中啦！

内容的提问来源于stack exchange，提问作者Sergio Mendez