如何实现Mat-radio-button自动聚焦功能？

针对你用*ngFor生成的mat-radio-button无法自动聚焦的问题，以下是可行的解决方案：

1. 修正模板结构 #

给每个mat-radio-button添加模板引用变量（比如#radioBtn），因为需要聚焦的是单选按钮本身，而非外层的radio-group：

<mat-radio-group [(ngModel)]="site" id="test_{{i}}" role="radiogroup" *ngFor="let site of paginatedSites; let i = index;">
   <mat-radio-button #radioBtn [value]="site" role="radio" title="{{ site.name}} {{ site.customerSiteName }}" (keydown.enter)="changeContactType(site)">
         {{ site.name }}
    </mat-radio-button>
</mat-radio-group>

2. 组件中通过ViewChildren获取所有单选按钮 #

在组件类中导入必要依赖，定义变量获取所有带#radioBtn的元素，并实现聚焦逻辑：

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  paginatedSites: any[] = [];
  @ViewChildren('radioBtn') radioButtons!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    // 监听单选按钮列表的变化，适配*ngFor异步渲染场景
    this.radioButtons.changes.subscribe(() => {
      this.focusTargetRadioButton(0);
    });

    // 如果paginatedSites已初始化，直接触发一次聚焦
    if (this.radioButtons.length > 0) {
      this.focusTargetRadioButton(0);
    }
  }

  // 聚焦指定索引的单选按钮，默认聚焦第一个
  private focusTargetRadioButton(index: number = 0): void {
    const targetRadio = this.radioButtons.get(index);
    if (targetRadio) {
      targetRadio.nativeElement.focus();
    }
  }

  // 数据加载示例（从服务获取paginatedSites）
  loadSites(): void {
    this.yourSiteService.getSites().subscribe(sites => {
      this.paginatedSites = sites;
      // 等待视图更新后执行聚焦，适配异步渲染
      setTimeout(() => {
        this.focusTargetRadioButton(0);
      });
    });
  }
}

3. 之前方法失败的原因 #

• ViewChild只能获取第一个匹配元素，无法覆盖*ngFor生成的所有按钮，必须用ViewChildren获取QueryList。
• 之前用document.querySelector定位的是radio-group的ID，但聚焦目标应该是内部的mat-radio-button元素。
• 未等待视图异步渲染完成就执行聚焦：*ngFor依赖paginatedSites数据，必须等数据加载完毕、视图更新后再调用focus方法。

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