angular - Angular项目中select Tag加载大数据的问题

Question

在调用 HTTP 请求并从服务器获得一堆数据(大约 14000)后，我在我的 Select Tag 中加载这些数量时出现问题，这使得所有页面变得如此缓慢，select Tag 完全如下所示:

<ng-container *ngIf = "merchantTitle!=null">
            <select #merchantId="ngModel" class="form-control" name="merchantId" [(ngModel)]="clubDiscountContractReportModel.merchantId" style="margin-right: 28px;" (change)="onMerchantChange($event.target.value)">
              <option *ngFor="let merchant of merchantTitle" [value]="merchant.merchantId" [selected]="clubDiscountContractReportModel.merchantId == merchant.merchantId">
                {{ merchant.merchantTitle }}
              </option>
            </select>
          </ng-container>

知道我的选择标签是否有任何问题，或者有更好的想法来处理在 UI 中缓慢加载数据的问题吗？

Answer 1

拥有 14000 个数据项没什么好担心的，但是当将它们放入 *ngFor 时它可以让它们加载到 DOM 中，这就是为什么您的页面如此缓慢的原因。许多预制的下拉解决方案提供了一种称为虚拟滚动的东西。这只会加载您在屏幕上实际看到的项目，并且会在您滚动浏览所有项目时动态加载 14000 中的更多项目，因此您的 DOM 不会拥挤。在纯 HTML 选择中自己实现这一点将需要您进行一些谷歌搜索。