如何提高 ngFor 循环的性能？答案

【问题标题】：How to improve performance of ngFor loop?如何提高 ngFor 循环的性能？
【发布时间】：2018-07-13 11:50:20
【问题描述】：

当 ngFor 应该渲染 7600 个字符串项目时，性能会很慢，浏览器会冻结几秒钟。

是否有可能提高 ngFor 的性能？

ngFor 代码：

  <ul *ngIf="isOpen"
    class="nano-drop-down-list"
    dropdownMenu>
    <li class="nano-f-r nano-f-30">
        <input [(ngModel)]="searchString"
               class="nano-f nano-p-0_10 nano-bc-ws hover-effect"
               placeholder="Search..." type="text"/>
    </li>

    <!-- ngFor which should be improved -->
    <li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty;"
        [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">
        <button (click)="handleClickOnOption(option[valueProperty]);"
                type="button"
                class="nano-f-c nano-f nano-p-0_10 nano-overflow-h">
            <div class="nano-f-r nano-f">
                <span class="nano-m-aaa0 nano-overflow-e">
                    {{ option[displayProperty] }}
                </span>
                <div *ngIf="isMultiple"
                     class="nano-f-r nano-f-30">
                    <i *ngIf="isOptionSelected(option[valueProperty])"
                       class="fa fa-check nano-m-a"
                       aria-hidden="true"></i>
                </div>
            </div>
        </button>
    </li>
</ul>

【问题讨论】：

使用服务器过滤减少列表中要填充的项目数

标签： javascript angular typescript

【解决方案1】：

Angular 6 中的NgForOf 带有覆盖track by 函数（source）的选项。它允许您选择角度应该检查更改的属性/条件。

为此，只需向您的组件添加一个方法，如下所示：

trackByFn(index, item) {
  return item.someUniqueIdentifier;
  // or if you have no unique identifier:
  // return index;
}

而在您的组件 HTML 中，您将循环更改为

<li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty; trackBy: trackByFn"
        [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">

Angular 会自动将当前索引以及当前项传递给函数。

Here's 一个很好的帖子，其中包含更具体的示例和更多信息（感谢@Pedro Arantes）。

【讨论】：

很好的答案。我推荐这篇文章 (netbasal.com/…) 并附上一个例子以便更好地理解。
谢谢。我将它添加到我的答案中并提到了你。
@PhilippMeissner 谢谢。

【解决方案2】：

trackBy和函数的解法是正确的。

我的解决方案如下：

<li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty;let i = index;trackBy: i" [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">

使用

let i = index; trackBy: i

为了避免有功能

【讨论】：