Angular 4 : 绑定下拉列表与巨大的数据集（10000+ 记录）

Question

我正在尝试将 Angular 下拉菜单 (Angular 4+) 与 10000 多条记录绑定，它挂起了应用程序，我们无法执行任何其他操作 post那。

我只是在使用 *ngFor，同样

 <select class="form-control browser-default col-md-12" name="attributeName" [(ngModel)]="attributeName">
      <option *ngFor="let item of typeArray" [ngValue]="item">
                {{item}}
       </option>
  </select>

我也尝试过 ng2-auto-complete 和 ng2-completer 等解决方案，但是当我开始输入时，应用程序挂起，因为数据量很大。还有其他可行的解决方案吗？

Answer 1

您使用的组件非常无用。它们都将更改检测设置为默认值，这使它们变慢了。使用@RahulSwamynathan 的提示，我设法获得了 ng-select，它使用 OpPush 作为 CD 机制来工作，而且速度非常快。为了进行测试，我使用了 26000 个 UUID，速度下降并不明显。但似乎使它起作用的是 virtualScroll 选项设置为 true。

<ng-select [items]="arrayWithStrings" [virtualScroll]="true" [formControlName]="'name'"></ng-select>

如果您想要来自组件的样式，您必须在 style.css 文件中添加 @import "~@ng-select/ng-select/themes/default.theme.css";。

Angular 4 : 绑定下拉列表与巨大的数据集（10000+ 记录）

Angular 4 : Binding dropdown with huge data set(10000+ records)

performance

autocomplete

dropdownbox

angular