Angular集成PrimeNG Dropdown选值时触发NG0900错误求助

错误根源在于你的<p-dropdown>模板代码里的双向绑定写错了：

[(ngModel)]="categories"

你把选中项的绑定目标设成了选项数组categories，而不是专门用来存储选中项的selectedCategory变量。当你选择一个分类时，Angular会把选中的单个对象赋值给原本是数组的categories，这就导致PrimeNG在遍历选项时尝试去diff一个对象，从而抛出NG0900错误。

修复方案 #

有两种可行的修改方式，选其一即可：

方案1：绑定到选中项变量（保留ngModel）

把[(ngModel)]的目标改成组件里定义的selectedCategory：

<div class="p-float-label">
  <p-dropdown [options]="categories" [(ngModel)]="selectedCategory" placeholder="Select a category"
    formControlName="category" optionLabel="label" [showClear]="true"></p-dropdown>
</div>

方案2：纯响应式表单（移除ngModel）

因为你已经使用了响应式表单的formControlName="category"，完全可以去掉[(ngModel)]，依赖表单控件来管理选中状态：

<div class="p-float-label">
  <p-dropdown [options]="categories" placeholder="Select a category"
    formControlName="category" optionLabel="label" [showClear]="true"></p-dropdown>
</div>

这种情况下，你可以通过this.createForm.get('category')?.value在组件中获取选中的分类值。

额外说明 #

• 确保你的Category接口中value字段的类型和表单控件category的初始值类型匹配（当前都是string，没问题）。
• 响应式表单中尽量避免混合使用ngModel和formControlName，减少不必要的冲突。

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