Angular 4：绑定下拉列表与庞大的数据集（10000+ 条记录）答案

【问题标题】：Angular 4 : Binding dropdown with huge data set(10000+ records)Angular 4：绑定下拉列表与庞大的数据集（10000+ 条记录）
【发布时间】：2019-04-29 04:22:21
【问题描述】：

我正在尝试将 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 这样的解决方案，但是当我开始输入时，应用程序挂起，因为数据量很大。还有其他可行的解决方案吗？

【问题讨论】：

在您的ngFor 上使用trackBy，并尝试从材料中查看虚拟卷轴。否则通过使用自动完成在服务器端修复它，但使用服务器查询数据
@PierreDuc 不幸的是，我们现在不能从服务器端做任何事情。我需要一种机制，通过它我只能从客户端模仿无限滚动。
ng-select 是我们在下拉列表中加载 26000 个数据的最佳方式 - 甚至不需要第二次检查 [ng-select.github.io/ng-select#/templates
@RahulSwamynathan 我正在尝试.. 你能告诉我如何将字符串数组绑定到选择中吗？

标签： angular performance autocomplete dropdownbox

【解决方案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 吗？当我导入模块时，我得到了这个错误：SCRIPT5007: Object expected
你用的是什么浏览器？它看起来像是浏览器会抛出的东西。
IE 11 是浏览器。我的数组就像：["a","a","a","a","a","a","a"........];