Angular下拉框预选中值重复显示问题排查求助

嘿，这个问题的症结一眼就能看出来——你控制器里的_.find条件犯了个低级错误，把比较运算符写成赋值运算符啦！

问题根源 #

看这段Controller代码：

this.selectedValue = _.find(this.values, value => {
  return value.name = this.defaultValue;
});

这里的value.name = this.defaultValue是赋值操作，不是判断相等！它会把数组里第一个遍历到的元素（也就是原本name为"A"的对象）的name直接改成"B"，然后返回这个赋值后的结果（也就是"B"，属于真值）。_.find碰到真值就会停止遍历，直接返回这个被修改的元素。

这就导致你的values数组悄悄变成了：

[ { "name": "B", "id": "123" }, { "name": "B", "id": "456" }, { "name": "C", "id": "789" }]

所以下拉列表里自然会出现两个"B"，而你选中的是第一个被篡改的"B"，这就是重复显示的原因。

修复方案 #

把赋值运算符=改成严格比较的===即可：

// 简洁写法
this.selectedValue = _.find(this.values, value => value.name === this.defaultValue);

// 或者完整箭头函数写法
this.selectedValue = _.find(this.values, value => {
  return value.name === this.defaultValue;
});

这样_.find会正确遍历数组，找到第一个name等于"B"的原始对象（也就是数组里的第二个元素），而且不会修改原数组的任何内容。

修复后效果：

• 下拉框默认选中"B"
• 展开下拉列表仅显示一次：A、B（带勾选标记）、C，完全符合你的预期。

额外提示 #

如果你不想用Lodash的_.find，也可以用AngularJS内置的filter，但_.find性能更优——它找到匹配项就会停止遍历，无需过滤整个数组。

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