我在Angular2(2.0.0)项目中使用Select2(4.0.3)。我在角度应用程序中遇到缓慢的加载时间,但在我创建的jsFiddle中没有。
下面的小提琴有一个名为listOfItems的对象,它将确切的数据作为我的Angular项目。我硬编码JSON字符串(来自我的应用程序)并将其转换为此对象。负载select2需要大约30毫秒。 https://jsfiddle.net/7e8v12fL/3/
我只对实际的select2设置调用进行计时。
以下是代码:
ngOnChanges(changes: SimpleChanges) {
if (this.fullList.length > 0) {
if (changes['fullList'] != null) {
this.listOfItems = this.convertInputList(this.fullList);
var startTime = new Date();
$(this.el.nativeElement).select2({
placeholder: 'aaa',
tags: false,
width: '100%',
allowClear: true,
data: this.listOfItems
});
var endTime = new Date();
alert(endTime - startTime);
}
}
}
当我的输入变量发生变化时,会触发NgOnChanges。首先它在listOfItems为空时触发,但我跳过select2步骤。然后当listOfItems有1,557个项目并且它需要超过3,000毫秒时它会触发。
如果我对select标签中的选项进行硬编码,那么速度很快。它正好在我加载数据的时候。
为什么我的Angular2应用程序中的速度比在小提琴中慢得多? 有关如何解决此问题的任何提示?
更新: 我将jsFiddle中的硬编码数组复制到我的角应用程序中,它在角度方面仍然很慢。