Angular4 compareWith 函数执行次数过多答案

【问题标题】：Angular4 compareWith function executing way too many timesAngular4 compareWith 函数执行次数过多
【发布时间】：2017-08-12 15:26:35
【问题描述】：

我做了一个模型驱动的表单，里面有三个 formControls。其中两个用null初始化，最后一个用对象初始化。

这些值将使用包含 50 个项目的 <select> 标记进行更改。该值的类型为Object。 Internet告诉我，如果是对象值，我应该使用[compareWith]函数，所以我这样做了。

actually, angular told me (see option caveat)

前 2 个（在 null 上初始化）执行 compareWith 函数 50 次，因为有 50 个项目要比较。

最后一个（用一个对象初始化）执行这个函数 1000+(!!) 次。我究竟做错了什么？（执行量见控制台日志）

Plunkr of doom

编辑：我还尝试添加/删除 null 选项。这也会导致奇怪的执行时间。

null 没有 null 选项的预填充列表 -> compareWith 执行了 1200 多次。
null 带有 null 选项的预填充列表 -> compareWith 执行了 50 次（应该如此）。
没有null选项的初始化列表：执行了1000+次
带有null 选项的初始化列表：执行了 1000 多次

Plunkr2

【问题讨论】：

通过给他一个参考：selectB: [this.list[0]] 它只被执行了 100 次。如果它不是参考，您只需要比较功能。确定不能通过 ref？
在我的真实用例中，我的列表来自后端，我用某个对象中的值预填充了表单控件。所以身份不一样。如果我用列表中的相应对象预填充我的表单控件，我只能传递一个引用，然后我根本不需要使用 compareWith。但是我仍然不知道为什么 compareWith 会进行如此多的迭代。

标签： angular

【解决方案1】：

我对此进行了一段时间的调试，得出了一个结论：) 一条线索是您分享的 link 中的以下语句。也就是说，与compareWith...

我们监听change 事件

所以让我们尝试使用带有对象的C 选项来解释这种行为。 compareWith 每次发生更改时都会触发，因此自然会在修改数组时触发。因此，每次在初始化时将项目“添加”到您的数组时都会触发它：

//数组发生变化

将obj1 与我们的表单控件进行比较

//数组发生变化

比较obj1，比较obj2和表单控件

//数组发生变化

比较obj1，比较obj2，比较obj3和表单控件

所以它会一直持续到我们找到匹配项。以上将没有您选择的null 选项。但是由于您也有要比较的 [ngValue]="null"，这将是与我们的表单控件进行比较的内容：

null, null, 01, null, 01, 02, null, 01, 02, 03, null ....

等等..

所以当每个项目被添加时，比较的迭代将从第一个项目重新开始到最新添加的项目。

至于为什么另外两个只执行 50 次，是因为 compareWith 被触发了 50 次，因为 list 更改了 50 次，但是在这种情况下，当 compareWith 运行时，它每次都匹配，因为它正在比较null 到 null，其中 other 是表单控件值，other 是 null 选项值。

至于你的另一个问题，你不需要使用[compareWith]，你也可以用另一种方式创建一个引用。您在评论中提到您在构建表单时没有要设置的初始值，但是当该对象可用时，您可以创建如下引用：

this.form.patchValue({selectC: this.list.find(x => x.code == this.myObj.code)})

现在我们不用担心compareWith的执行量了:)

【讨论】：

感谢您的解释。这种行为会导致严重的性能问题，我想知道为什么我会使用 compareWith。
是的，这可能非常昂贵！我也使用ngModel对此进行了调试。如果你有 null 选项，它将运行 80 次，因为 ngModel 绑定最初是 null，所以它会将 null 与 null （50 次）进行比较，然后 30 次找到匹配项，这样就完美了！但是，如果您在下拉菜单中没有 null 选项，它实际上会执行 1275 次（在 chrome 中）