Angular Material：设置MatButtonToggleGroup值时浏览器崩溃求助

问题现象 #

• 初始在*ngFor外使用mat-button-toggle-group时，设置[value]="'Mix'"无选中状态；改为直接value="Mix"后浏览器出现渲染部分页面后卡死的情况，控制台无报错
• 将mat-button-toggle-group或mat-select移出*ngFor循环后功能完全正常，放在循环内则触发相同的卡死问题
• 环境：Angular 14.2.6、Angular Material 14.2.5

核心原因 #

卡死的本质是变更检测无限循环：

• 模板中直接使用transitions.entries()作为*ngFor的数据源，entries()方法每次变更检测都会返回新的数组引用，导致Angular不断重新渲染循环内容
• Material组件（如mat-button-toggle-group、mat-select）内部的状态变更会触发Angular变更检测，进而再次调用entries()生成新数组，形成死循环

解决方案 #

1. 预处理数据源，避免重复生成新数组 #

在组件类中提前把transitions.entries()的结果转为固定数组存储，不要直接在模板中调用方法：

// 组件.ts文件
transitionEntries: [string, any][];

ngOnInit(): void {
  // 将entries结果转为数组并存储为组件属性
  this.transitionEntries = Array.from(this.transitions.entries());
}

模板中改用预处理后的数组：

<div *ngFor="let entry of transitionEntries; let i = index;" class="transition-box" 
    fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="20px"
    fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start stretch">

    <mat-button-toggle-group value="Mix">
        <mat-button-toggle value="Mix">Mix</mat-button-toggle>
        <mat-button-toggle value="Dip">Dip</mat-button-toggle>
        <mat-button-toggle value="Wipe">Wipe</mat-button-toggle>
        <mat-button-toggle value="DVE">DVE</mat-button-toggle>
        <mat-button-toggle value="Noop">Noop</mat-button-toggle>
        <mat-button-toggle value="Animated">Anim</mat-button-toggle>
    </mat-button-toggle-group>

<!-- 其他页面内容 -->
</div>

2. 修复mat-button-toggle-group默认选中问题 #

使用属性绑定确保值类型匹配，避免静态值绑定的兼容性问题：

<mat-button-toggle-group [value]="'Mix'">
  <!-- 按钮项 -->
</mat-button-toggle-group>

也可以通过组件变量实现双向绑定，更便于后续逻辑处理：

// 组件.ts文件
selectedTransition = 'Mix';

模板中：

<mat-button-toggle-group [(value)]="selectedTransition">
  <!-- 按钮项 -->
</mat-button-toggle-group>

3. 可选：用trackBy优化循环渲染性能 #

为*ngFor添加trackBy函数，帮助Angular识别循环项的唯一性，减少不必要的DOM重渲染：

// 组件.ts文件
trackByTransitionKey(_: number, entry: [string, any]): string {
  // 根据entry的key作为唯一标识
  return entry[0];
}

模板中：

<div *ngFor="let entry of transitionEntries; let i = index; trackBy: trackByTransitionKey" class="transition-box">
  <!-- 页面内容 -->
</div>

验证步骤 #

1. 替换*ngFor数据源为预处理后的数组
2. 调整mat-button-toggle-group的默认值绑定方式
3. 运行应用，检查循环内的Material组件是否正常工作，浏览器卡死现象是否消失

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