Оптимизация большой угловой таблицы сетки

Question

У меня проблемы с производительностью при попытке отобразить сетку редактируемых входных данных.Он начинает работать очень медленно, около 200 строк и 10 столбцов.(с использованием Angular 4.4)

<tr *ngFor="let row of rows">
  <td *ngFor="let column of columns">
    <ng-container [ngSwitch]="column.columnType">
      <ng-template [ngSwitchCase]="0">
        <input [(ngModel)]="row[column.index].value" ...>
      </ng-template>
      <ng-template [ngSwitchCase]="1">
        <select ...>
      </ng-template>
      <ng-template [ngSwitchCase]="2">
        <span ...>
      </ng-template>
      <ng-template [ngSwitchCase]="...">
        <div ...>
      </ng-template>
      <ng-template [ngSwitchCase]="15">
        <a href ...>
      </ng-template>
    </ng-container>
  </td>
</tr>

Требуется много времени (согласно профайлеру Chrome - debugUpdateDirectives) и в операторе switch.Есть идеи как уменьшить это?

Answer 1

Я решил эту проблему, обернув логику с * ngFor внутри компонента OnPush.Это делает отображение входов 300 * 10 супер быстрым!

Answer 2

Возможно, вы захотите использовать trackBy.Вы можете добавить эту дополнительную часть к каждому из ваших *ngFor, чтобы помочь Angular узнать, нужно ли перерисовывать каждый срез.Он будет использовать значение, возвращаемое trackBy, чтобы определить, является ли строка грязной (т. Е. lastTrackByResult === currentTrackByResult).

<tr *ngFor="let row of rows; trackBy: rowTrackByFunction">

А затем в вашем контроллере:

rowTrackByFunction(index, item) {
   // You will want to return a unique primitive for angular to use as a comparison item
   // (string, number, etc.)
   return item.someUniqueIdentifier;
}

См. Эту ссылку для получения дополнительной информации:

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

PS Если производительность становится действительно важной, вы можете рассмотреть возможность использования готового компонента таблицы, который поставляется со встроенной виртуальной прокруткой.Я бы порекомендовал NGX-Datable, который может легко обрабатывать тысячи строк, рисуя только то, что в данный момент видит пользователь.http://swimlane.github.io/ngx-datatable/