Angular中如何为单选按钮调用patchValue？按技能评分赋值

步骤1：优化HTML的FormControlName绑定 #

你的HTML中formControlName="{{ i }}"可以调整为更规范的属性绑定写法：

<tbody formArrayName="skills">
  <tr class="skill-tr" *ngFor="let skill of skills; let i = index">
    <td class="table-data res-td skill-td">
      <b>{{skill.skillName}}<span>:</span></b>{{skill.skillDescription}}
    </td>
    <td><input type="radio" [formControlName]="i" [value]="1" /></td>
    <td><input type="radio" [formControlName]="i" [value]="2" /></td>
    <td><input type="radio" [formControlName]="i" [value]="3" /></td>
    <td><input type="radio" [formControlName]="i" [value]="4" /></td>
    <td><input type="radio" [formControlName]="i" [value]="5" /></td>
  </tr>
</tbody>

步骤2：正确初始化FormArray #

在组件中基于你的skills数组初始化FormArray，每个技能对应一个独立的FormControl：

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent {
  public skillForm: FormGroup;
  public skills: any[]; // 你的技能列表数组

  constructor(private fb: FormBuilder) {
    // 确保skills数组加载完成后再初始化表单
    this.initSkillForm();
  }

  private initSkillForm(): void {
    this.skillForm = this.fb.group({
      // 为每个技能创建一个空的FormControl
      skills: this.fb.array(this.skills.map(() => this.fb.control(null)))
    });
  }

  // 快捷获取skills对应的FormArray
  get skillsFormArray(): FormArray {
    return this.skillForm.get('skills') as FormArray;
  }
}

步骤3：匹配技能与评分并执行patchValue #

拿到后端返回的评分数据后，通过skillId匹配对应技能的评分，构建与FormArray结构一致的数组，再用patchValue批量赋值：

// 传入后端返回的评分数据
setSkillRatings(ratingData: any[]): void {
  // 构建和FormArray长度对应的评分值数组
  const ratingValues = this.skills.map(skill => {
    // 根据skillId找到当前技能的评分记录
    const matchedItem = ratingData.find(item => item.skill.skillId === skill.skillId);
    // 返回对应的评分值，无匹配则设为null
    return matchedItem ? matchedItem.rating.rating : null;
  });

  // 为整个FormArray设置值
  this.skillsFormArray.patchValue(ratingValues);
}

关键注意事项 #

• 确保单选按钮的[value]类型与后端返回的rating.rating类型一致（均为数字），如果后端返回字符串，需转换为数字：+matchedItem.rating.rating
• 必须在skills数组和后端评分数据都加载完成后，再调用setSkillRatings方法
• FormArray的长度必须与skills数组长度完全对应，避免出现赋值错位

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