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>

在switch语句中还有很多时间（根据Chrome分析器 - debugUpdateDirectives）。关于如何减少这种想法的任何想法？

Answer 1

您可能希望使用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

P.S。如果性能变得非常重要，您可以考虑使用内置虚拟滚动的预制表组件。我建议使用NGX-Datable，只需绘制用户当前可以看到的内容即可轻松处理数千行。 http://swimlane.github.io/ngx-datatable/

Answer 2

我通过将带有* ngFor内部的逻辑包装到OnPush组件中来解决这个问题。这使300 * 10输入显示超快！

优化大角度表格

2 个答案: