javascript - Hur förbättrar man prestandan i en ngFor-loop?

När ngFor ska rendera 7600 objekt som är strängar, då är prestandan mycket långsam, webbläsaren fryser i ett par sekunder.

Är det på något sätt möjligt att förbättra prestandan för ngFor?

ngFor-kod:

  <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>

Svar #1

NgForOf i Angular 6 levereras med alternativet att åsidosätta track by-funktionen (källa). Det låter dig välja vilken egenskap/vilket villkor Angular ska kontrollera ändringar mot.

För det, lägg helt enkelt till en metod i din komponent på följande sätt:

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

Medan du i din komponents HTML ändrar loopen till

<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 kommer automatiskt att skicka den aktuella indexet, samt det aktuella objektet till funktionen.

Här är ett bra inlägg med ett mer konkret exempel och ytterligare information (Tack @Pedro Arantes).

Svar #2

Lösningen med trackBy och funktionen är korrekt.

Min lösning är följande:

<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">

använder

let i = index; trackBy: i 

för att undvika att ha en funktion