У меня есть Turbotable компонент, который отображает 16 столбцов, с переменным количеством строк, в любом месте от 2 до 7000+. Таблица использует ngFor и ngSwitch для отображения нужной информации из API в таблицу.
<p-table [columns]="cols" [value]="requestTableResults" [reorderableColumns]="true"
*ngIf="!loadingRequests && requestTableResults.length !== 0">
<ng-template pTemplate="header" let-columns>
<tr id="requestTableHeader">
<th class="padding-header">
<input type="checkbox" (change)="selectAll($event)" [(ngModel)]="isSelectedAll" />
</th>
<th *ngFor="let col of columns" pReorderableColumn class="padding-header">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr class="stripes">
<td class="padding-data">
<input type="checkbox" [(ngModel)]="rowData.isSelected" (change)="selectOne(rowData.isSelected)" />
</td>
<td *ngFor="let col of columns" [ngSwitch]="col.field" class="padding-data">
<span *ngSwitchCase="'status'">
<div class="badge status-badge">
<span *ngIf="!rowData.overdue || rowData.status !== 'Open'">
{{rowData.status}}
</span>
Таблица отображает информацию и очень хорошо работает в Chrome, на загрузку уходит ~ 2,5 секунды. В IE, хотя он сканирует, занимая, по крайней мере, 9 секунд, иногда он вызывает перегрузку памяти или выдает длинную ошибку скрипта. Производительность лучше на сервере dev по сравнению с localhost, но все еще неприемлема. Есть ли способ улучшить производительность Turbotable? Есть ли какая-то основная проблема, связанная с использованием ngFor, ngSwitch и изменяемого компонента внутри IE?