Angular - IE не отвечает на проблему при связывании больших данных

Question

Мой сервис возвращает более 7000 записей, когда я связываю ответ с переменной компонента, после чего экран переходит в не отвечающий режим.Это относится только к IE.Точно так же у меня есть 3 выпадающих в пользовательском интерфейсе.Я тоже пробовал решатель, но у меня не получилось.Экран перестает отвечать на запросы, когда сервисный вызов завершен.

Component.ts

 this._myservice.getData(this.param1).subscribe(response => {this.Capabilities = response.json()});

Component.html

     <ul class="dropdown-menu">
      <li *ngFor="let capability of Capabilities;trackBy:capability?.Name" id="{{capability.Id}}">

      <a href="javascript:void(0);" id="{{capability.Id}}">{{capability.Name}}</a>
       </li>
    </ul>

Answer 1

7000 записей !!! Это большое количество записей !!! Со своим кодом вы пытаетесь добавить в дом все свои записи одновременно:

<li *ngFor="let capability of Capabilities;trackBy:capability?.Name" id="{{capability.Id}}">

Следовательно, ваш браузер будет отображать 7000 элементов в сыром виде (большое потребление памяти).

для такого количества записей, я думаю, что лучше пройти "виртуальную прокрутку", см .: https://material.angular.io/cdk/scrolling/overview

https://medium.com/front-end-weekly/how-to-use-virtual-scrolling-using-angular-7-cdk-9802110111fa

и демоверсия: https://stackblitz.com/edit/angular-cdk-demo-virtual-scroll?file=app%2Fapp.component.html

=> Если вы нажмете F12 в демо-версии, вы увидите, что в app-virtual-scroll => отображаются лучшие элементы => лучшие характеристики