Question

我有angular 7项目。

我有一个通用网格，其中基于config显示数据。

我有一页，其中网格数据具有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

假设没有分页选项，那么在进行繁重的DOM“提升”时，如果想要功能良好的应用程序，则需要实现虚拟滚动。

您还可以尝试实现无限滚动，将DOM负载分成较小的块，但是一旦呈现了所有数据，您仍然可能会遇到性能问题，具体取决于数据集的大小。

在Angular 7+中，您可以使用Material CDK中的虚拟滚动视口指令

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

也可以看看ngx-datatable

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

Answer 2

为什么不使用解析器？或在用户滚动// ngx-infinite-scroll

时加载数据

* ngFor需要4秒钟以上的时间来加载数据

2 个答案: