在Angular2 app中选择2慢,但不是小提琴

时间:2016-10-18 19:20:12

标签: angular select2

我在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中的硬编码数组复制到我的角应用程序中,它在角度方面仍然很慢。

0 个答案:

没有答案