当有大量数据列表时，dx-select-box 不加载 - DevExtreme答案

【问题标题】：dx-select-box does not load when there is huge list of data - DevExtreme当有大量数据列表时，dx-select-box 不加载 - DevExtreme
【发布时间】：2017-03-31 12:51:44
【问题描述】：

我有一个要求，选择框中要显示的数据可以多达 8000 条记录。

目前，当我尝试使用数组源将数据绑定到 dx-select-box 时，控件会崩溃，甚至会挂起我的浏览器。

有什么方法可以虚拟化数据绑定以一次加载少量记录？

注意：我使用的是 16.2.5 版本的 devextreme angular2 库

【问题讨论】：

标签： angular devexpress devextreme

【解决方案1】：

您是否尝试使用paginate 选项？

使用此选项，选择框将能够逐步呈现数据。

用法：

<dx-select-box
    [dataSource]="data"
    ...
></dx-select-box>

TS：

import DataSource from 'devextreme/data/data_source';
@Component({
...
})
export class AppComponent {
    ...
    constructor(service: Service) { 
        ...
        this.data = new DataSource({
            paginate: true,
            pageSize: 10,
            store: {
            type: "array",
                data: HUGE_ARRAY,
                key: "ID"
            }
        });
    }
}

【讨论】：

我已经尝试过使用分页，但我的商店不是 ArrayStore。我想与自定义商店有相同的实现。
您也可以使用CustomStore。如果您使用dataSource.paginate 选项，skip 和take 参数将在CustomStore.load 方法中可用。我认为这足以加快您的选择框。
这个sample展示了它的作用