* ngFor загрузка данных занимает более 4 секунд

Question

У меня угловой 7 проект.

У меня есть одна универсальная сетка, в которой я отображаю данные, основанные на конфигурации.

У меня есть одна страница, на которой данные сетки имеют 200 строк и около 20 столбцов

Ниже приведен пример кода

<tr role="row" *ngFor="let objRC of filteredList | orderBy: orderFilter.orderBy : orderFilter.reverse; let idx=index; trackBy: trackByIndex;"
    [class.highlight]="objRC.highlighted">
    <td *ngIf="allowSelect">
        <div class="checkbox checkbox-success">
            <input [id]="'check'+idx" type="checkbox" [(ngModel)]="objRC.selected" (change)="changeRowSelection()">
            <label [for]="'check'+idx"></label>
        </div>
    </td>
    <td *ngFor="let objGColumn of gridColumns; let idx=index; trackBy: trackByIndex;"
        [ngSwitch]="objGColumn.type" placement="auto" [triggers]="objGColumn.popover || 'none'"
        [popover]="objRC[objGColumn.propertyKey]" [popoverTitle]="objGColumn.label | translate"
        containerClass="chiefComplaint" container="body">
        <div *ngSwitchCase="'email'" [className]="'flex align-items-center ' + (objGColumn.className || '')">
            <i *ngIf="objRC[objGColumn.propertyKey]" class="fa fa-envelope mr-1">
            </i>
            <a [href]="'mailto:'+objRC[objGColumn.propertyKey]" [textContent]="objRC[objGColumn.propertyKey]"></a>
        </div>
        ....
    </td>
</tr>

Таким образом, на основе массива gridColumns создаются столбцы.

Проблема, с которой я сталкиваюсь, заключается в том, что после получения данных от API *ngFor на отображение данных уходит более 4-5 секунд . Иногда это занимает даже около 10 секунд. Так что генерация DOM .

занимает столько времени

Это так сильно влияет на производительность приложения.

Я даже попробовал обнаружение изменений. Кажется, у меня ничего не работает.

Может кто-нибудь посоветовать мне, как решить эту проблему?

Answer 1

Почему вы не используете резольвер? Или загрузить данные, когда пользователь прокручивает // ngx-infinite-scroll

Answer 2

Предполагая, что разбиение на страницы не является опцией, вам потребуется реализовать виртуальную прокрутку, если вы хотите хорошо работающее приложение при выполнении тяжелого DOM 'подъема'.

Вы также можете попробовать реализовать бесконечную прокрутку, разделив нагрузку DOM на более мелкие части, но после визуализации всех данных у вас могут возникнуть проблемы с производительностью в зависимости от размера набора данных.

В Angular 7+ вы можете использовать директиву виртуальной прокрутки в окне просмотра материала CDK

https://material.angular.io/cdk/scrolling/overview

Также взгляните на ngx-datatable

https://github.com/swimlane/ngx-datatable