我制作了一个模型驱动的表单,里面有三个formControl。其中两个由null
初始化,最后一个用对象初始化。
值将使用50个项目的<select>
标记进行更改。该值的类型为Object
。互联网告诉我,如果有对象值,我应该使用[compareWith]
函数,所以我这样做。
前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次以上答案 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
运行时它会命中一个匹配每次因为它将null
与null
进行比较,其他是表单控件值,其他是null
选项值。
关于您的其他问题,您不需要使用[compareWith]
,您也可以用其他方式创建引用。您在评论中提到在构建表单时没有要设置的初始值,但是当该对象可用时,您可以创建一个引用,如:
this.form.patchValue({selectC: this.list.find(x => x.code == this.myObj.code)})
现在我们不必担心compareWith
:)