ng选择:使用ng选项和ng模板有什么区别

Question

所以我有一个包含45000多个项的数组，我想制作一个ng-select组件。我尝试使用ng选项和*ngFor显示这些选项，但组件加载速度非常慢。然而，当我在ng-select上使用ng-template和[items]属性时，它加载得非常快。有人知道为什么会发生这种事吗？为什么ng-template比ngFor快？

带ng选项：

<ng-select [multiple]="false" [(ngModel)]="selected" [virtualScroll]="true" [items]="list">
<ng-option *ngFor="let item of list" [value]="item">{{item}}</ng-option>
</ng-select>

使用ng模板：

<ng-select [multiple]="false" [(ngModel)]="selected" [virtualScroll]="true" [items]="list">
<ng-template ng-option-tmp let-item="item">
{{item}}
</ng-template>
</ng-select>

Answer 1

Virtual scrollport只在屏幕上迭代/渲染当时所需的项目，而for循环必须在整个列表上迭代。

Answer 2

带有[items]的ng模板方法在渲染大型数据集时更具性能，因为它利用虚拟滚动来优化DOM渲染和内存使用，而带有*ngFor方法的ng选项为每个项创建一个DOM元素，这可能会导致大型数据集的性能降低。