Angular4 compareWith函数执行方式太多次

时间:2017-08-11 07:03:21

标签: angular

我制作了一个模型驱动的表单,里面有三个formControl。其中两个由null初始化,最后一个用对象初始化。

值将使用50个项目的<select>标记进行更改。该值的类型为Object。互联网告诉我,如果有对象值,我应该使用[compareWith]函数,所以我这样做。

LINK

前2个(在null上初始化)执行compareWith函数50次,因为它应该有50个要比较的项目。

最后一个(用对象初始化)执行此功能1000+(!!)次。 我究竟做错了什么? (请参阅控制台日志以了解执行量)

actually, angular told me (see option caveat)

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

  • null预填充列表,没有null选项 - &gt; compareWith执行了1200多次。
  • null预填充列表,其中包含null选项 - &gt; compareWith执行了50次(应该如此)。
  • 初始化列表,没有null选项:执行1000次以上
  • 使用null选项初始化列表:执行1000次以上

Plunkr of doom

1 个答案:

答案 0 :(得分:2)

我调试了一段时间并得出结论:)一个线索是您分享的 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次,因为列表改变了50次,但在这种情况下,当compareWith运行时它会命中一个匹配每次因为它将nullnull进行比较,其他是表单控件值,其他是null选项值。

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

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

现在我们不必担心compareWith:)

的执行量
相关问题