Angular 4：绑定下拉菜单与庞大的数据集（10000+ 条记录）

Question

我正在尝试将 Angular 下拉列表（Angular 4+）与 10000 多条记录绑定，它挂起应用程序，我们无法执行任何其他操作。

我只是使用 *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>

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