Prime ng 自动完成虚拟滚动

Question

我有 19,000 个数据要使用 prime ng 自动完成加载，但是当我单击下拉图标时冻结了整个 UI。

已访问 github 链接和论坛，但未找到任何答案。

有什么方法可以在 p 自动完成中创建虚拟滚动条吗？

Answer 1

您只需要最新版本的 primeNG，现在，primeNG 支持 Virtual-Scrol 开箱即用。您只需要设置两个属性..

virtualScroll = "true"
itemSize = "10"

现在，您的虚拟卷轴 PrimeNG AutoComplete 可以使用了。如果您在演示 link 中看到，第一个下拉菜单没有虚拟滚动，它挂起，但第二个下拉菜单有虚拟滚动并且没有挂起..

<h5>Virtual Scroll [Length - {{this.manyRecords?.length}} ]</h5>

<p-autoComplete virtualScroll="true" itemSize="4" [(ngModel)]="manyRecords" 
  [suggestions]="filteredCountries"
  (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
    <ng-template let-country pTemplate="item">

       <div style="font-size:18px;">{{country.name}}</div>

    </ng-template>
</p-autoComplete>

就是这样。

Prime ng 自动完成虚拟滚动

Prime ng autocomplete virtual scroll

primeng

angular