Angular 14响应式表单Mat单选按钮组无响应且UI卡顿问题求助

核心问题1：重复渲染单选按钮组 #

代码中多余的*ngFor="let element of item?.data"会根据item.data的长度重复渲染整个单选组容器。比如item.data有3个选项，页面会生成3个独立的单选组，导致点击时多个组互相干扰出现无响应，同时重复DOM元素直接引发UI卡顿。

修复：
移除外层的*ngFor循环，只保留单选按钮内部的选项循环：

<div *ngSwitchCase="'radiobutton'">
  <div *ngIf="shouldRenderChildControl(controlName,item,property)">
    <div *ngIf="item.title === 'Contact Number Type'; else otherContent">
      <span *ngIf="CheckIfChildFormControlReq(controlName, item.name)">*</span>
      <mat-radio-group [formControlName]="item.name">
        <mat-radio-button
          *ngFor="let option of item.data"
          [value]="option.id"
        >
          {{ option.name }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
    <ng-template #otherContent> </ng-template>
  </div>
</div>

核心问题2：不必要的mat-form-field包裹 #

mat-radio-group是独立的表单控件，不需要嵌套在mat-form-field中。额外的容器会增加冗余DOM结构和样式计算，加重卡顿。

修复：
移除<mat-form-field>及内部标签，用普通标签替代单选组标题：

<div *ngSwitchCase="'radiobutton'">
  <div *ngIf="shouldRenderChildControl(controlName,item,property)">
    <div *ngIf="item.title === 'Contact Number Type'; else otherContent">
      <span *ngIf="CheckIfChildFormControlReq(controlName, item.name)">*</span>
      <label>{{ item.name }}</label>
      <mat-radio-group [formControlName]="item.name">
        <mat-radio-button
          *ngFor="let option of item.data"
          [value]="option.id"
        >
          {{ option.name }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
    <ng-template #otherContent> </ng-template>
  </div>
</div>

优化建议：减少模板中方法调用频率 #

模板中的shouldRenderChildControl()和CheckIfChildFormControlReq()会在每次Angular变更检测时执行，若方法内有复杂逻辑会频繁触发计算，加剧卡顿。

优化：
在组件类中提前计算状态并存储为属性，模板直接绑定属性：

// 组件类代码
isControlVisible: boolean;
isControlRequired: boolean;

ngOnInit() {
  this.isControlVisible = this.shouldRenderChildControl(this.controlName, this.item, this.property);
  this.isControlRequired = this.CheckIfChildFormControlReq(this.controlName, this.item.name);
}

模板修改为：

<div *ngSwitchCase="'radiobutton'">
  <div *ngIf="isControlVisible">
    <div *ngIf="item.title === 'Contact Number Type'; else otherContent">
      <span *ngIf="isControlRequired">*</span>
      <label>{{ item.name }}</label>
      <mat-radio-group [formControlName]="item.name">
        <mat-radio-button
          *ngFor="let option of item.data"
          [value]="option.id"
        >
          {{ option.name }}
        </mat-radio-button>
      </mat-radio-group>
    </div>
    <ng-template #otherContent> </ng-template>
  </div>
</div>

额外检查点 #

1. 确认组件类中已正确为响应式表单注册对应item.name的FormControl，且初始值与option.id类型匹配（如均为字符串或数字）。
2. 若仍有卡顿，可尝试为组件设置ChangeDetectionStrategy.OnPush优化变更检测策略。

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