升级到Angular 16后*ngFor遍历表单控件报错的解决咨询

你的核心问题是把policyOptions这个FormArray错误地断言成了FormGroup，导致返回的controls是键值对对象而非数组，而*ngFor只能遍历可迭代的集合（比如数组），Angular 16的类型检查更严格，所以直接抛出了类型不匹配的错误。

修复步骤 #

1. 修正TypeScript方法 #

将GetPolicyOptionsCtrls方法里的类型断言从FormGroup改为FormArray，直接返回数组类型的controls：

this.AccountForm = this.formBuilder.group({
  policyOptions : this.formBuilder.array([])
},{validator: OnePolicyOptionSelected});

// 修正后的方法
public GetPolicyOptionsCtrls()
{
  // 正确断言为FormArray
  const policyOptionsArray = this.AccountForm.get('policyOptions') as FormArray;
  return policyOptionsArray.controls;
}

2. （可选）更严谨的类型安全写法 #

可以封装一个私有属性来获取FormArray，避免重复断言，提升代码可维护性：

private get policyOptionsArray(): FormArray {
  return this.AccountForm.get('policyOptions') as FormArray;
}

public GetPolicyOptionsCtrls() {
  return this.policyOptionsArray.controls;
}

3. HTML代码无需修改 #

原HTML的*ngFor逻辑保持不变即可，现在返回的controls是数组类型，符合NgIterable的要求。

为什么会报错？ #

Angular 16收紧了模板类型检查，*ngFor要求数据源必须是NgIterable（数组、Set等可迭代类型）。你之前的代码把FormArray错误断言为FormGroup，FormGroup.controls返回的是{ [key: string]: AbstractControl }类型的对象，不属于可迭代集合，因此触发类型不匹配错误。

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