angular - 如何提高包含复选框的 primeNg 表的性能

Question

在使用带有 p-checkbox 的 p-table 时，我遇到了一些性能问题。表有大约 1000 行和 15 列，其中 10 只包含复选框。

所以在最后的表中包含 10000 个复选框。当我从表中删除复选框时，该表需要生成的时间大约为 5 秒。当复选框可见时，时间会增加到 20 秒左右！

该表仅包含 1000 行，当然包含排序、过滤，但正如我之前写的，当我删除复选框时，生成表的时间大约为 5 秒。

那么问题出在哪里？即使我留下完全空的复选框声明，就像这样：

        <p-checkbox binary="true">
        </p-checkbox>

时间还是很大的。这是我的表的结构：

<p-table
  [value]="data">
  <ng-template pTemplate="caption">
  </ng-template>

  <ng-template pTemplate="header">
    <tr>
      <th class="toggle-column"></th>
      <!-- LAST NAME COLUMN -->
      <th class="lastname-column" [pSortableColumn]="'lastName'">
      </th>
  </ng-template>

  // BODY DEFINITION - CHECKBOXES
  <ng-template pTemplate="body" let-row let-expanded="expanded" 
   let-rowIndex="rowIndex">
    <tr>
      <td class="toggle-column"></td>
      <td *ngFor="let col of columns" class="{{col.styleClass}}">
        <span class="ui-column-title">{{col.header}}</span>
        <p-checkbox
          binary="true"
          [disabled]="!isEditable"
          [(ngModel)]="row[col.field]"
          (onChange)="toggle($event, col.field, rowIndex)">
        </p-checkbox>
      </td>
    </tr>
  </ng-template>

  <ng-template let-row pTemplate="rowexpansion">
    <tr>
      <td>
        <table class="expanded-table">
          <tr *ngFor="let user of row.userGroup.members" class="expanded-row">
            ...
          </tr>
        </table>
      </td>
    </tr>
  </ng-template>

  <ng-template pTemplate="emptymessage">
    <tr>
      <td [attr.colspan]="tableConfig.colspan">
        {{'ui.noRecordsFound'}}
      </td>
    </tr>
  </ng-template>
</p-table>

滚动上的分页和延迟加载是不可能的 - 我的客户不想要这个。他想立即看到洞表。

我也考虑过使用 ChangeDetectionStrategy.OnPush 但每次添加新复选框时都会添加 ngOnChanges 和 ngDoCheck （我将主体模板分成 3 个组件来测试这个孔变化检测的东西 - 例如你在上面看到的所有东西都在一个组件中）。

我猜可以使用本机复选框，我已经检查过了，时间也非常好，大约 8 秒。但我使用 primeNg 框架是有原因的，对吧？！

主要问题是 p-checkbox 组件，它工作得非常慢，我知道问题不在于渲染，因为我检查了分析器 - “幕后”发生的事情需要大量时间 - 问题在于我认为更改检测，而不是渲染本身。

那么你知道我可以如何改进我的桌子吗？

标签： angularperformancecheckboxhtml-tableprimeng