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

Question

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

我只是用*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 文件。