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。

Angular 4：具有巨大数据集的绑定下拉列表（超过10000条记录）

1 个答案: