Блог

После вызова HTTP-запроса и получения большого количества данных (около 14000) без каких-либо проблем с сервера у меня возникла проблема с загрузкой этого количества в мой тег Select, и это делает всю страницу настолько медленной, что тег select выглядит точно так же, как показано ниже:

 <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>
 

есть идеи, есть ли какие-либо проблемы с моим тегом Select или какая-либо лучшая идея для решения этой проблемы медленной загрузки данных в пользовательский интерфейс?

О наличии 14000 элементов данных беспокоиться не о чем, но при их размещении в an *ngFor это позволяет им загружаться в DOM, поэтому ваша страница работает так медленно. Множество готовых выпадающих решений предоставляют нечто, называемое виртуальной прокруткой. Это загрузит только те элементы, которые вы действительно видите на экране, и будет динамически загружать больше из 14000, пока вы прокручиваете все элементы, поэтому ваш DOM не будет стеснен. Реализация этого самостоятельно в простом HTML select потребует от вас некоторого поиска в Google.