Angular 7中FormArray内PrimeNG Dropdown选项无法绑定求助

我之前也碰到过类似的坑，结合你的场景，咱们从几个核心点排查修复：

1. 先确认FormArray的控件初始化逻辑 #

FormArray里的每个表单控件必须正确初始化，而且初始值的类型要和Dropdown选项的value完全匹配。比如如果你的选项是对象，初始值要么是对应对象的引用，要么通过optionValue指定具体属性后用对应属性值初始化。

举个正确的初始化示例：

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

// 组件类中初始化表单
constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    // 初始化FormArray，每个子项包含对应Dropdown的FormControl
    dropdownItems: this.fb.array([
      this.fb.group({
        selectedOption: ['', Validators.required] // 初始值为空，或者匹配选项的value
      })
    ])
  });
}

// 方便模板遍历的getter
get dropdownItems(): FormArray {
  return this.myForm.get('dropdownItems') as FormArray;
}

2. 模板中FormArray的绑定上下文要正确 #

遍历FormArray时，必须明确指定formGroupName来关联每个子表单组，Dropdown的formControlName要对应子组里的控件名，同时正确配置Dropdown的选项属性。

正确的模板写法：

<form [formGroup]="myForm">
  <!-- 绑定FormArray的名称 -->
  <div formArrayName="dropdownItems">
    <!-- 遍历每个子控件，指定索引作为formGroupName -->
    <div *ngFor="let item of dropdownItems.controls; let i = index" [formGroupName]="i">
      <p-dropdown 
        [options]="yourOptionList" 
        formControlName="selectedOption"
        optionLabel="displayName" <!-- 对应选项对象中显示的字段 -->
        optionValue="valueId"     <!-- 对应选项对象中作为值的字段 -->
        placeholder="请选择选项">
      </p-dropdown>
    </div>
  </div>
</form>

3. 避开Reactive Forms和ngModel的冲突 #

在使用FormArray这类响应式表单时，绝对不要同时用[(ngModel)]和formControlName，两者的状态管理逻辑会冲突，直接导致绑定失效。

4. 检查版本兼容性 #

Angular 7必须搭配对应版本的PrimeNG（建议用PrimeNG 7.x系列），版本不匹配会出现各种控件绑定异常。你可以查看package.json里的依赖，确保primeng版本和Angular 7兼容。

5. 选项对象的绑定细节 #

如果你的Dropdown选项是复杂对象，一定要通过optionLabel和optionValue明确指定显示字段和值字段；如果想直接绑定整个对象作为控件值，可以把optionValue设为"."，这时候初始化FormControl时要传入选项数组中的具体对象引用，而不是新对象。

比如：

// 选项数组
yourOptionList = [
  { valueId: '1', displayName: '选项1' },
  { valueId: '2', displayName: '选项2' }
];

// 如果要默认选中选项1，初始化时这样写
this.fb.group({
  selectedOption: ['1', Validators.required]
})

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