Angular中select绑定对象时报错'trying to diff '[Object object]''

我之前也碰到过一模一样的问题，这个错误本质上是Angular处理表单控件值和选项对象的对比逻辑导致的，咱们一步步来搞定它：

1. 先理清错误根源 #

当你把完整的opera对象绑定到[ngValue]时，Angular默认会用对象引用来判断选项是否选中。如果你的表单控件operators的初始值和选项数组里的对象不是同一个引用（比如选项是后端返回的、或者动态生成的新对象），Angular的变更检测在尝试对比对象时就会抛出这个diff错误。另外，如果你的需求是提交对象数组，那你的select控件还得开启多选模式——默认单选的话，控件值是单个对象，和你期望的数组类型不匹配也会触发错误。

2. 具体解决步骤 #

步骤一：开启多选模式（如果需要提交数组） #

要让select支持多选并返回对象数组，给select添加multiple属性：

<select class="form-control" formControlName="operators" multiple
        (change)="onChangeOfUdfParamValue(i,operators)"
        [compareWith]="compareOperators">
  <option [ngValue]="opera" *ngFor="let opera of formula.controls.operators.value">
    {{opera.display}}
  </option>
</select>

步骤二：添加自定义对比函数 #

在组件类里定义一个compareWith函数，告诉Angular怎么判断两个对象相等（比如用唯一的value字段来对比）：

// 组件的.ts文件中
compareOperators(op1: any, op2: any): boolean {
  // 先处理null/undefined的情况，再用value字段判断相等性
  return op1 && op2 ? op1.value === op2.value : op1 === op2;
}

然后把这个函数绑定到select标签上（如上面的HTML代码所示）。这样Angular就不会再用引用对比，而是按你指定的逻辑来匹配选项和控件值。

步骤三：移除手动设置的selected属性 #

你代码里的[attr.selected]="opera.selected ? true : null"会和Angular表单的自动选中逻辑冲突，建议直接删掉。表单会根据formControlName绑定的值和compareWith函数自动处理选中状态。

步骤四：确保表单初始值正确 #

初始化表单时，给operators控件设置对应类型的初始值：

// 假设formula是你的FormGroup实例
this.formula = this.fb.group({
  operators: [[]] // 多选场景下初始化为空数组
  // 如果是单选场景，可以设置为初始选中的对象，比如this.operators[0]
});

3. 验证效果 #

做完这些修改后，你应该就能正常绑定完整对象，提交时也能得到对应的对象数组了。这个方法的核心就是用compareWith绕过Angular默认的对象引用对比，改用自定义的字段对比逻辑，同时确保控件类型和你期望的一致（数组对应多选select）。

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