Проблема производительности для огромных данных в mat-option angular 6

Question

Я использовал Материальный подход для выпадающего меню для данных моего поставщика. Вендора более 12000, т.е. 12к + данных. Используя mat-option, мне нужно использовать * ngFor, который отнимает уйму времени. Это делает мое приложение очень медленным и невосприимчивым, как зависание. Какие могут быть эффективные решения для этого? Решение может быть для выпадающего или других подходов.

<mat-form-field fxFlex.gt-sm>
   <mat-label>Vendor</mat-label>
      <mat-select formControlName="VendorId">
         <mat-option *ngFor="let vendor of vendorData" [value]="vendor.VendorId">
                  {{ vendor.VendorName }}
         </mat-option>
       </mat-select>       
</mat-form-field>

Answer 1

Основная причина неотзывчивости и медлительности заключается в том, что компонент пытается отобразить все 12 000 элементов узла в DOM.

Я бы порекомендовал вам реализовать какую-то бесконечную логику прокрутки, такую, чтобы только определеннаяколичество узлов отображается в определенной позиции прокрутки при прокрутке с помощью параметров mat-select.

Вот следующие способы, которыми вы можете достичь этого:

1) Установка Пакет ng-mat-select-infinite-scrol l. Пока Angular Material не реализует свои собственные возможности бесконечной прокрутки в компоненте mat-select, этот пакет будет наиболее простым способом реализации бесконечной прокрутки для mat-select.

2) Если вы не хотите устанавливатьдругая сторонняя библиотека, вы можете обратиться к этому ответ . Человек, который ответил на этот вопрос, имеет достойную реализацию бесконечного свитка для mat-select.

Answer 2

Что ж, это не проблема внешнего интерфейса, и вы можете добиться этого на внешнем интерфейсе с помощью бесконечной прокрутки, но я бы посоветовал вам справиться с этим на внутреннем сервере, используя redis-сервер или какой-либо другой инструмент управления памятью. Я надеюсь, что это сработает в этом случае. .